/* ============================================================
   COMMAND DECK — Design + Motion Tokens
   Single source of truth. No component may invent a value.
   Direction: dark, data-focused, numbers-first.
   ============================================================ */

:root {
  /* ---- Surfaces (dark, layered depth) ---- */
  --bg-base:        #0a0d14;
  --bg-surface-1:   #111621;
  --bg-surface-2:   #1a2130;
  --bg-surface-3:   #232c3d;
  --bg-inset:       #070a10;

  /* ---- Borders ---- */
  --border-subtle:  #212a3a;
  --border-default: #2a3446;
  --border-strong:  #3a465c;

  /* ---- Text ---- */
  --text-primary:   #e8edf5;
  --text-secondary: #95a3ba;
  --text-muted:     #5e6b82;
  --text-inverse:   #0a0d14;

  /* ---- Accent: electric lime ---- */
  --accent:         #c6f24e;
  --accent-hover:   #d4fa6b;
  --accent-press:   #b2dd3e;
  --accent-wash:    rgba(198, 242, 78, 0.12);
  --accent-line:    rgba(198, 242, 78, 0.35);

  /* ---- Semantic status (color carries meaning, not decoration) ---- */
  --status-ontime:     #c6f24e;
  --status-ontime-bg:  rgba(198, 242, 78, 0.12);
  --status-late:       #ffb020;
  --status-late-bg:    rgba(255, 176, 32, 0.12);
  --status-absent:     #ff5c5c;
  --status-absent-bg:  rgba(255, 92, 92, 0.12);
  --status-leave:      #9b8cff;
  --status-leave-bg:   rgba(155, 140, 255, 0.12);
  --status-holiday:    #4ed4f2;
  --status-holiday-bg: rgba(78, 212, 242, 0.12);
  --status-neutral:    #5e6b82;
  --status-neutral-bg: rgba(94, 107, 130, 0.12);

  /* ---- Typography: system stack (zero network, zero FOUT) ----
     Pairing strategy: humanist sans for prose, monospace for every
     numeral so times and totals align in columns. */
  --font-ui:  -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono",
              Consolas, "Liberation Mono", monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.9375rem;
  --text-lg:    1.125rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.75rem;
  --text-clock: clamp(3.25rem, 1.5rem + 7vw, 6rem);

  --leading-tight: 1.15;
  --leading-base:  1.55;
  --tracking-wide: 0.08em;
  --tracking-tight: -0.02em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    650;

  /* ---- Spacing: strict 4px grid ---- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;

  /* ---- Radius ---- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* ---- Elevation (dark UI: hairline + shadow, not shadow alone) ---- */
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.40);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 8px 32px rgba(198, 242, 78, 0.15);

  /* ---- Layout ---- */
  --shell-max:    1280px;
  --sidebar-w:    236px;
  --header-h:     60px;
  --control-h:    48px;   /* every input, select and button matches this */
  --focus-ring:   0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  /* ============================================================
     MOTION TOKENS — locked. Every animation derives from these.
     Hand-picking a duration per element is a defect.
     ============================================================ */
  --d-instant: 80ms;
  --d-fast:    150ms;
  --d-base:    220ms;
  --d-slow:    380ms;
  --d-hero:    720ms;   /* reserved: the clock in/out confirmation beat */
  --d-breathe: 2400ms;  /* live-status pulse, one full cycle */
  --d-spin:    640ms;   /* one rotation of the busy indicator */

  --e-out:    cubic-bezier(0.16, 1, 0.30, 1);      /* expo-out, default */
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* symmetric moves */
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot, hero only */

  --travel-sm: 4px;
  --travel-md: 10px;
  --travel-lg: 20px;

  --stagger:   55ms;    /* sibling offset; within the 40-80ms band */

  --z-base: 0; --z-raised: 10; --z-sticky: 100;
  --z-overlay: 1000; --z-toast: 1100;
}

/* Reduced motion: collapse duration, keep the FINAL VISIBLE STATE.
   Never leaves an element at opacity 0 or translated off-position. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms;
    --d-slow: 1ms; --d-hero: 1ms; --stagger: 0ms;
    --travel-sm: 0px; --travel-md: 0px; --travel-lg: 0px;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}