/*
 * Design System Specification: The Architectural Authority
 * Tokens & Foundations
 */

:root {
    /* Colors - Core */
    --ds-color-primary: #D97706; /* Amber Accent */
    --ds-color-primary-base: #1b0900;
    --ds-color-on-primary: #FFFFFF;

    --ds-color-secondary-container: #c2d4ff;
    --ds-color-on-secondary-container: #4a5b80;
    --ds-color-secondary: #4d5e83;

    --ds-color-surface: #f6fafe;
    --ds-color-surface-container-low: #f0f4f8;
    --ds-color-surface-container-high: #e4e9ed;
    --ds-color-surface-container-highest: #dfe3e7;
    --ds-color-surface-lowest: #FFFFFF;

    --ds-color-on-surface: #171c1f;
    --ds-color-on-surface-variant: #44474e;

    --ds-color-error: #ba1a1a;
    --ds-color-on-error: #ffffff;

    --ds-color-success: #3a1c00;
    --ds-color-on-success: #d27200;

    --ds-color-outline-variant: #c5c6cf;

    /* Typography */
    --ds-font-family-body: 'Inter', sans-serif;
    --ds-font-family-data: 'JetBrains Mono', monospace;

    /* Spacing & Sizes */
    --ds-spacing-1: 0.25rem;
    --ds-spacing-2: 0.4rem;
    --ds-spacing-3: 0.75rem;
    --ds-spacing-4: 1rem;

    --ds-radius-default: 0px;
    --ds-radius-sm: 0px;
    --ds-radius-none: 0px;

    /* Z-Index */
    --ds-z-index-dropdown: 1000;
    --ds-z-index-sticky: 1020;
    --ds-z-index-fixed: 1030;
    --ds-z-index-modal-backdrop: 1040;
    --ds-z-index-modal: 1050;
    --ds-z-index-popover: 1060;
    --ds-z-index-tooltip: 1070;
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */

.ds-font-body {
    font-family: var(--ds-font-family-body);
}

.ds-font-data {
    font-family: var(--ds-font-family-data);
}

.ds-headline-lg {
    font-family: var(--ds-font-family-body);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-color-on-surface);
}

.ds-title-sm {
    font-family: var(--ds-font-family-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-color-on-surface);
}

.ds-label-sm {
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-color-on-surface-variant);
}

.ds-currency {
    font-family: var(--ds-font-family-data);
    text-align: right;
    letter-spacing: 1px;
}

/* ==========================================================================
   Surfaces & Elevation
   ========================================================================== */

.ds-surface {
    background-color: var(--ds-color-surface);
    color: var(--ds-color-on-surface);
}

.ds-surface-panel {
    background-color: var(--ds-color-surface-container-low);
    border-radius: var(--ds-radius-default);
}

.ds-surface-inset {
    background-color: var(--ds-color-surface-container-high);
    border-radius: var(--ds-radius-default);
}

/* Ambient Shadows */
.ds-shadow-ambient {
    box-shadow: 0 0 24px rgba(23, 28, 31, 0.04); /* 4% opacity of on_surface */
}

/* Glassmorphism */
.ds-glass {
    background-color: rgba(246, 250, 254, 0.85); /* surface at 85% */
    backdrop-filter: blur(20px);
}

/* ==========================================================================
   Buttons (Machined Precision)
   ========================================================================== */

.ds-btn {
    font-family: var(--ds-font-family-body);
    border-radius: var(--ds-radius-default);
    padding: var(--ds-spacing-2) var(--ds-spacing-4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-spacing-2);
}

.ds-btn:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
}

.ds-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button */
.ds-btn-primary {
    background-color: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
}

.ds-btn-primary:hover:not(:disabled) {
    background-color: var(--ds-color-primary-base); /* Shift to higher contrast */
}

/* Secondary Button */
.ds-btn-secondary {
    background-color: var(--ds-color-secondary-container);
    color: var(--ds-color-on-secondary-container);
}

.ds-btn-secondary:hover:not(:disabled) {
    background-color: var(--ds-color-secondary);
    color: var(--ds-color-surface);
}

/* Tertiary / Ghost Button */
.ds-btn-ghost {
    background-color: transparent;
    color: var(--ds-color-on-surface-variant);
    padding: var(--ds-spacing-2);
}

.ds-btn-ghost:hover:not(:disabled) {
    background-color: var(--ds-color-surface-container-high);
    color: var(--ds-color-on-surface);
}

/* ==========================================================================
   Data Tables
   ========================================================================== */

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ds-font-family-body);
    font-size: 0.875rem;
}

.ds-table th {
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-color-on-surface-variant);
    text-align: left;
    padding: var(--ds-spacing-2) var(--ds-spacing-3);
    background-color: var(--ds-color-surface-container-high);
}

.ds-table td {
    padding: 0 var(--ds-spacing-3);
    height: 36px; /* Fixed 36px height */
    vertical-align: middle;
}

/* Alternating Row Stripes (No horizontal lines) */
.ds-table tbody tr:nth-child(odd) {
    background-color: var(--ds-color-surface);
}

.ds-table tbody tr:nth-child(even) {
    background-color: var(--ds-color-surface-container-low);
}

/* Ghost Border fallback for extreme density if needed */
.ds-table.ds-table-bordered td {
    border-bottom: 1px solid rgba(197, 198, 207, 0.15); /* outline_variant at 15% */
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ds-badge-success {
    background-color: var(--ds-color-success);
    color: var(--ds-color-on-success);
}

.ds-badge-critical {
    background-color: var(--ds-color-error);
    color: var(--ds-color-on-error);
}

.ds-badge-neutral {
    background-color: var(--ds-color-surface-container-highest);
    color: var(--ds-color-on-surface-variant);
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */

.ds-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-1);
    margin-bottom: var(--ds-spacing-4);
}

.ds-label {
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-color-on-surface-variant);
}

.ds-input {
    background-color: var(--ds-color-surface-container-highest);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--ds-radius-default) var(--ds-radius-default) 0 0;
    padding: var(--ds-spacing-2) var(--ds-spacing-3);
    font-family: var(--ds-font-family-body);
    font-size: 0.875rem;
    color: var(--ds-color-on-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    width: 100%;
}

.ds-input:focus, .ds-input:focus-visible {
    outline: none;
    border-bottom-color: var(--ds-color-primary); /* Terminal input style */
    background-color: var(--ds-color-surface-container-high);
}

.ds-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Layout Helpers (Responsive)
   ========================================================================== */

/* Grid Columns */
.ds-grid {
    display: grid;
    gap: var(--ds-spacing-4);
}

/* Mobile-first Base: 1 col */
.ds-grid { grid-template-columns: 1fr; }

/* Tablet */
@media (min-width: 768px) {
    .ds-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
    .ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .ds-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
}