/* Master Universal Design Tokens — Industrial Inventory Standard */
/* Strictly follows /Users/adamanwar/Downloads/DESIGN.md */

:root {
    /* Surface & Canvas Palette (Anti-Flash White canvas) */
    --background: #F2F3F4;
    --on-background: #191C21;
    --surface: #F2F3F4;
    --surface-dim: #D9DAE1;
    --surface-bright: #F2F3F4;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F2F3FA;
    --surface-container: #EDEDF5;
    --surface-container-high: #E7E8EF;
    --surface-container-highest: #E1E2E9;
    --surface-variant: #E1E2E9;

    /* Text & On-Surface Hierarchy */
    --on-surface: #191C21;
    --on-surface-variant: #424751;
    --inverse-surface: #2E3036;
    --inverse-on-surface: #F0F0F8;

    /* Borders & Outlines (1px Geometric Aesthetic) */
    --outline: #727783;
    --outline-variant: #C2C6D3;
    --border: #C2C6D3;
    --border-strong: #191C21;

    /* Brand Primary (Bauhaus Blue) */
    --primary: #003E7A;
    --on-primary: #FFFFFF;
    --primary-container: #0055A4;
    --on-primary-container: #AFCCFF;
    --inverse-primary: #A8C8FF;

    /* Secondary & Tertiary Neutrals */
    --secondary: #515F74;
    --on-secondary: #FFFFFF;
    --secondary-container: #D5E3FD;
    --on-secondary-container: #57657B;
    --tertiary: #6A2C00;
    --on-tertiary: #FFFFFF;
    --tertiary-container: #8F3D00;
    --on-tertiary-container: #FFBC99;

    /* Semantic Status Signaling */
    --error: #BA1A1A;
    --on-error: #FFFFFF;
    --error-container: #FFDAD6;
    --on-error-container: #93000A;

    --warning: #855400;
    --on-warning: #FFFFFF;
    --warning-container: #FFDDB0;
    --on-warning-container: #2A1800;

    --success: #006D3A;
    --on-success: #FFFFFF;
    --success-container: #C8F5D0;
    --on-success-container: #00210D;

    /* Geometry & Radii */
    --radius-sm: 2px;
    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Spacing Grid (4px Baseline) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Typography Families */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Typography Hierarchy Scale Classes (DESIGN.md Lines 51-85) */
.display-lg {
    font-family: var(--font-ui);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.headline-md {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.title-sm {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.body-md {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.data-tabular {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0em;
    font-variant-numeric: tabular-nums;
}

.label-caps {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}