/* ============================================
   DataLink Tech Portal v01 — Design Tokens
   "Tactical HUD" — Industrial instrumentation
   ============================================ */

:root {
    /* ---- Backgrounds ---- */
    --bg-base:      #0c0c0e;
    --bg-surface:   #141416;
    --bg-elevated:  #1c1c1f;
    --bg-hover:     #252528;
    --bg-active:    #2d2d30;
    --bg-overlay:   rgba(0, 0, 0, 0.6);

    /* ---- Borders ---- */
    --border-subtle:  #2a2a2e;
    --border-default: #3a3a3f;
    --border-strong:  #4a4a50;
    --border-focus:   #00d26a;

    /* ---- Text ---- */
    --text-primary:   #f5f5f0;
    --text-secondary: #a0a098;
    --text-muted:     #6b6b65;
    --text-inverse:   #0c0c0e;

    /* ---- Primary Accent — Data Link Green ---- */
    --accent:         #00d26a;
    --accent-dim:     #00b35a;
    --accent-bright:  #2ee882;
    --accent-subtle:  rgba(0, 210, 106, 0.12);
    --accent-text:    #00d26a;

    /* ---- Semantic Colors ---- */
    --color-success:       #2dd4a8;
    --color-success-dim:   rgba(45, 212, 168, 0.12);
    --color-warning:       #f59e0b;
    --color-warning-dim:   rgba(245, 158, 11, 0.12);
    --color-danger:        #ef4444;
    --color-danger-dim:    rgba(239, 68, 68, 0.12);
    --color-info:          #38bdf8;
    --color-info-dim:      rgba(56, 189, 248, 0.12);

    /* ---- Test Status Colors ---- */
    --status-pass:    #2dd4a8;
    --status-fail:    #ef4444;
    --status-ni:      #f59e0b;
    --status-na:      #6b6b65;

    /* ---- Typography ---- */
    --font-display:   'Outfit', system-ui, sans-serif;
    --font-body:      'DM Sans', system-ui, sans-serif;
    --font-mono:      'Fira Code', 'Courier New', monospace;

    --text-xs:    11px;
    --text-sm:    13px;
    --text-base:  15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --text-3xl:   30px;
    --text-4xl:   36px;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --leading-loose:  1.75;

    /* Display headings (Outfit 700) read modern with slight negative tracking */
    --tracking-display: -0.02em;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    /* ---- Spacing (4px base) ---- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* ---- Border Radius ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow:  0 0 20px rgba(0, 210, 106, 0.15);
    --shadow-focus: 0 0 0 3px rgba(0, 210, 106, 0.25);

    /* ---- Transitions ---- */
    --duration-fast:   100ms;
    --duration-normal: 200ms;
    --duration-slow:   300ms;
    --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:        cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Semantic Aliases (used by layout + views) ---- */
    --surface-primary:   var(--bg-base);
    --surface-secondary: var(--bg-surface);
    --surface-tertiary:  var(--bg-elevated);
    --border-primary:    var(--border-default);
    --accent-primary:    var(--accent);
    --text-tertiary:     var(--text-muted);

    /* ---- Z-Index Scale ---- */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    500;
    --z-toast:    600;
    --z-tooltip:  700;

    /* ---- Layout ---- */
    --header-height:  56px;
    --bottom-nav-height: 64px;
    --touch-min:      44px;
    --content-max:    1400px;
}