/* ============================================================
   RUNDECK · design tokens
   colour marks the exception, type does the structural work
   nothing decorates.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Asphalt · neutrals (cool cast, hue 240) ---------- */
  --n-0:    #FFFFFF;
  --n-25:   #FAFBFC;
  --n-50:   #F5F7F9;   /* page background */
  --n-100:  #EEF1F3;   /* table head, toolbars, inset wells */
  --n-200:  #E1E5E8;   /* panel borders, table hairlines */
  --n-300:  #D0D5D9;   /* dividers, disabled borders */
  --n-400:  #9DA4AA;   /* non-text only */
  --n-500:  #6B737A;   /* input borders, icon strokes (4.82 on white) */
  --n-600:  #5E666C;   /* text floor — meta, captions, column labels (5.84 on white) */
  --n-700:  #424A50;   /* secondary body */
  --n-800:  #272E33;   /* sidebar active fill */
  --n-900:  #161C21;   /* primary ink (17.18 on white) */
  --n-950:  #0A1014;   /* sidebar hover */
  --n-1000: #05080C;   /* asphalt — ops sidebar ground */

  /* ---------- Harbor · brand / primary (petrol-teal, OKLCH hue ~205) ---------- */
  --h-50:   #E9F9FB;
  --h-100:  #D1F1F6;
  --h-200:  #AEE2EA;
  --h-300:  #7FCAD5;
  --h-400:  #48AAB5;
  --h-500:  #078A97;
  --h-600:  #006F7B;   /* primary button, focus ring (white ink 5.90) */
  --h-700:  #005761;   /* link, pill ink (8.28 on white) */
  --h-800:  #003F47;
  --h-900:  #002B31;   /* portal hero band */

  /* ---------- Hi-Vis · accent (only on dark ground or as fill with dark ink) ---------- */
  --v-300:  #EFF77D;
  --v-400:  #E3EB3A;
  --v-500:  #D6DD06;   /* the signal — nav rail, live pulse, brand mark, driver CTA */
  --v-600:  #B3BB09;
  --v-700:  #848F14;   /* only Hi-Vis usable as border on light (3.55) */
  --v-900:  #2B3200;   /* ink on Hi-Vis fills (9.11 on --v-500) */

  /* ---------- Semantic · lifecycle vs. health ---------- */
  --ok-soft:#E6F8ED;  --ok-line:#B4E2C5;  --ok:#288355;  --ok-ink:#0B5F39;
  --wa-soft:#FFF2DA;  --wa-line:#F7D19B;  --wa:#EC9E32;  --wa-ink:#874E0D;
  --er-soft:#FFEEEC;  --er-line:#FDC8C2;  --er:#CC2B31;  --er-ink:#AC1822;
  --in-soft:#E9F9FB;  --in-line:#AEE2EA;  --in:#078A97;  --in-ink:#005761;

  /* ---------- Semantic role tokens (surface / ink / lines) ---------- */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-100);
  --surface-3:     var(--n-200);
  --line-faint:    var(--n-200);
  --line:          var(--n-300);
  --line-strong:   var(--n-500);
  --ink:           var(--n-900);
  --ink-2:         var(--n-700);
  --ink-3:         var(--n-600);
  --ink-4:         var(--n-500);
  --primary:       var(--h-600);
  --primary-ink:   var(--n-0);
  --primary-hover: var(--h-700);
  --primary-press: var(--h-800);
  --accent:        var(--v-500);
  --accent-ink:    var(--v-900);
  --link:          var(--h-700);
  --link-hover:    var(--h-800);
  --focus:         var(--h-600);

  /* ---------- Type ---------- */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               "Consolas", "Menlo", monospace;

  /* type scale — fixed rem, no fluid clamp */
  --fs-3xs:  0.6875rem;  /*  11px  column heads, micro labels */
  --fs-2xs:  0.75rem;    /*  12px  dense meta, timestamps, pills */
  --fs-xs:   0.8125rem;  /*  13px  ops workhorse — table body */
  --fs-sm:   0.875rem;   /*  14px  form labels, sidebar */
  --fs-base: 0.9375rem;  /*  15px  portal body */
  --fs-md:   1rem;       /*  16px  driver body minimum */
  --fs-lg:   1.125rem;   /*  18px  panel titles */
  --fs-xl:   1.3125rem;  /*  21px  page title */
  --fs-2xl:  1.625rem;   /*  26px  section head */
  --fs-3xl:  2rem;       /*  32px  KPI figure */
  --fs-4xl:  2.75rem;    /*  44px  portal hero */
  --fs-5xl:  3.75rem;    /*  60px  driver hero number */

  /* line height */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-ui:    1.45;
  --lh-body:  1.6;
  --lh-prose: 1.7;

  /* tracking */
  --tr-display:   -0.02em;
  --tr-heading:   -0.011em;
  --tr-ui:         0;
  --tr-micro:     +0.06em;
  --tr-mono:      -0.01em;

  /* weight */
  --fw-400: 400;
  --fw-500: 500;   /* emphasis, numeric cells */
  --fw-600: 600;   /* headings, labels, nav */
  --fw-700: 700;   /* page titles, KPI figures */

  /* width axis (Archivo) */
  --wd-condensed:  88;
  --wd-compact:    92;
  --wd-normal:    100;
  --wd-wide:      108;
  --wd-display:   112;

  /* ---------- Spacing (4px base, non-linear at low end) ---------- */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  20px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-12: 64px;
  --sp-14: 80px;

  /* ---------- Radii · industrial, not pill ---------- */
  --r-xs:  3px;
  --r-sm:  4px;
  --r-md:  6px;    /* default */
  --r-lg:  10px;
  --r-xl:  14px;
  --r-2xl: 20px;
  --r-frame: 36px; /* device frame only */
  --r-full: 999px; /* pills + avatars only */

  /* ---------- Elevation · borders first ---------- */
  --shadow-sm:  0 1px 2px rgb(5 8 12 / .07);
  --shadow-md:  0 1px 2px rgb(5 8 12 / .06), 0 4px 10px -3px rgb(5 8 12 / .09);
  --shadow-pop: 0 2px 4px rgb(5 8 12 / .06), 0 8px 22px -6px rgb(5 8 12 / .14);
  --shadow-lg:  0 4px 8px rgb(5 8 12 / .07), 0 20px 44px -10px rgb(5 8 12 / .20);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* ---------- Structure ---------- */
  --rail-w:       60px;
  --sidebar-w:    248px;
  --topbar-h:     52px;
  --subbar-h:     44px;
  --content-max:  1600px;
  --portal-max:   1200px;
  --drawer-w:     480px;
  --modal-w:      560px;
  --device-w:     390px;
  --device-h:     844px;

  /* ---------- Z-index · semantic scale ---------- */
  --z-base:              0;
  --z-raised:            10;
  --z-sticky:            200;
  --z-dropdown:          300;
  --z-drawer-backdrop:   400;
  --z-drawer:            410;
  --z-modal-backdrop:    500;
  --z-modal:             510;
  --z-toast:             600;
  --z-tooltip:           700;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-hover:  120ms;
  --dur-press:  140ms;
  --dur-pop:    160ms;
  --dur-modal:  180ms;
  --dur-drawer: 260ms;
  --dur-flash:  420ms;
}

/* ---------- Dark theme · ops night shift ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #090D12;
  --surface:       #11161A;
  --surface-2:     #181E23;
  --surface-3:     #21282D;
  --line-faint:    #1C2227;
  --line:          #2B3237;
  --line-strong:   #434B51;

  --ink:           #F2F5F7;
  --ink-2:         #B9BEC2;
  --ink-3:         #999FA4;   /* text floor (5.58 on deepest surface) */
  --ink-4:         #868D92;   /* non-text only */

  --primary:       #59C4CC;
  --primary-ink:   #05080C;
  --primary-hover: #7FCAD5;
  --primary-press: #48AAB5;
  --accent:        #DBE22C;
  --accent-ink:    #0F1107;
  --link:          #7FCAD5;
  --link-hover:    #AEE2EA;
  --focus:         #59C4CC;

  --ok-soft:#163524;  --ok-line:#1F5138;  --ok:#61CA8F;  --ok-ink:#8FD9B0;
  --wa-soft:#412C0C;  --wa-line:#6B4818;  --wa:#F9BB51;  --wa-ink:#FBCE7E;
  --er-soft:#4D1F1C;  --er-line:#7B2E27;  --er:#FB756E;  --er-ink:#FF9E99;
  --in-soft:#0E2A2D;  --in-line:#154349;  --in:#59C4CC;  --in-ink:#8DDBE0;

  --shadow-sm:  0 1px 2px rgb(0 0 0 / .5);
  --shadow-md:  0 1px 2px rgb(0 0 0 / .4), 0 4px 10px -3px rgb(0 0 0 / .55);
  --shadow-pop: 0 2px 4px rgb(0 0 0 / .35), 0 8px 22px -6px rgb(0 0 0 / .6);
  --shadow-lg:  0 4px 8px rgb(0 0 0 / .35), 0 20px 44px -10px rgb(0 0 0 / .65);
}

/* ---------- Driver day (default when inside .device-day) ---------- */
.device-day {
  --bg:      #FFFFFF;
  --surface: #FFFFFF;
  --ink:     #161C21;
  --ink-2:   #424A50;
  --ink-3:   #5E666C;
  --primary: var(--v-500);
  --primary-ink: var(--n-1000);
  --line:    #E1E5E8;
}

/* ---------- Driver night ---------- */
.device-night {
  --bg:      #030507;
  --surface: #0D1115;
  --surface-2: #12181D;
  --ink:     #F2F5F7;
  --ink-2:   #B1B7BB;
  --ink-3:   #8A9096;
  --line:    #21282D;
  --primary: #D6DD06;
  --primary-ink: #0F1107;
  --ok:  #63D194;
  --wa:  #FFBF50;
  --er:  #FF7871;
}

/* ---------- Reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* keep opacity + colour changes, drop transforms */
}