/* ==========================================================================
   AutoDrive — Design tokens
   --------------------------------------------------------------------------
   Every visual value in the interface is defined here and nowhere else.
   No component stylesheet may contain a literal colour, font size, spacing
   value, radius or shadow. Retheming — including per-tenant branding later —
   is then a change to this file alone.

   Palette direction: "Signal". Deep road-sign blue carries structure and
   primary action; amber is the accent, which both suits the domain and keeps
   continuity with the colour staff already associate with AutoDrive.
   ========================================================================== */

:root {

  /* --- Neutrals -------------------------------------------------------- */
  /* Cool-leaning greys. Used for text, borders, surfaces and dividers.     */
  --n-0:   #ffffff;
  --n-25:  #fbfcfe;
  --n-50:  #f5f7fa;
  --n-100: #edf1f6;
  --n-200: #dde3ec;
  --n-300: #c3ccd9;
  --n-400: #97a2b4;
  --n-500: #6c7889;
  --n-600: #4e5a6d;
  --n-700: #3a4557;
  --n-800: #252e3e;
  --n-900: #151c28;
  --n-950: #0c111a;

  /* --- Brand ----------------------------------------------------------- */
  --b-50:  #eef4ff;
  --b-100: #dbe6ff;
  --b-200: #bcd2ff;
  --b-300: #8fb4ff;
  --b-400: #5b8cfa;
  --b-500: #3668ee;
  --b-600: #1f4dd8;
  --b-700: #1a3eb0;
  --b-800: #1b368c;
  --b-900: #1b3070;
  --b-950: #121f45;

  /* --- Accent (amber) -------------------------------------------------- */
  --a-50:  #fff8ea;
  --a-100: #ffeec4;
  --a-200: #ffd985;
  --a-300: #ffbf46;
  --a-400: #ffa81c;
  --a-500: #f28705;
  --a-600: #d16302;
  --a-700: #a94406;
  --a-800: #89350d;
  --a-900: #712c0e;

  /* --- Semantic hues --------------------------------------------------- */
  --g-50:  #ecfdf3;   --g-100: #d1fadf;  --g-500: #12b76a;
  --g-600: #039855;   --g-700: #027a48;  --g-800: #05603a;

  --r-50:  #fef3f2;   --r-100: #fee4e2;  --r-500: #f04438;
  --r-600: #d92d20;   --r-700: #b42318;  --r-800: #912018;

  --y-50:  #fffaeb;   --y-100: #fef0c7;  --y-500: #f79009;
  --y-600: #dc6803;   --y-700: #b54708;  --y-800: #93370d;

  --c-50:  #eff8ff;   --c-100: #d1e9ff;  --c-500: #2e90fa;
  --c-600: #1570ef;   --c-700: #175cd3;  --c-800: #1849a9;

  /* --- Surfaces -------------------------------------------------------- */
  --surface-page:    var(--n-50);
  --surface-card:    var(--n-0);
  --surface-sunken:  var(--n-100);
  --surface-raised:  var(--n-0);
  --surface-hover:   var(--n-50);
  --surface-active:  var(--b-50);
  --surface-inverse: var(--n-900);
  /* "Today" in a calendar. In day/agenda views this covers the whole grid,
     so it must be a whisper, not a highlight. */
  --surface-today:   #fffdf6;

  /* --- Text ------------------------------------------------------------ */
  --text:           var(--n-800);
  --text-strong:    var(--n-900);
  /* Both greys clear 4.5:1 on every surface token above (white through
     --n-100). The previous --n-500 measured 3.95:1 on sunken surfaces, so
     table headings and secondary labels failed WCAG 1.4.3. */
  --text-muted:     #5c6675;
  --text-subtle:    #616c7a;
  --text-inverse:   var(--n-0);
  --text-link:      var(--b-600);
  --text-link-hover:var(--b-700);

  /* --- Borders --------------------------------------------------------- */
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-focus:  var(--b-500);

  /* --- Application shell ----------------------------------------------- */
  --sidebar-bg:            var(--b-950);
  --sidebar-bg-hover:      rgba(255, 255, 255, .07);
  --sidebar-bg-active:     rgba(255, 255, 255, .12);
  --sidebar-text:          #b9c4dc;
  --sidebar-text-strong:   #ffffff;
  --sidebar-text-muted:    #7f8db0;
  --sidebar-border:        rgba(255, 255, 255, .08);
  --sidebar-accent:        var(--a-300);

  --topbar-bg:     var(--n-0);
  --topbar-border: var(--n-200);

  --sidebar-width:            256px;
  --sidebar-width-collapsed:  64px;
  --topbar-height:            56px;

  /* --- Typography ------------------------------------------------------ */
  /* System stack: no webfont request, no external dependency, no flash of
     unstyled text on a slow connection. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs:   0.75rem;     /* 12px — dense table meta, badges            */
  --fs-sm:   0.8125rem;   /* 13px — table cells, secondary text         */
  --fs-base: 0.875rem;    /* 14px — body default                        */
  --fs-md:   1rem;        /* 16px — form inputs (prevents iOS zoom)     */
  --fs-lg:   1.125rem;    /* 18px — card titles                         */
  --fs-xl:   1.375rem;    /* 22px — page titles                         */
  --fs-2xl:  1.75rem;     /* 28px — dashboard figures                   */
  --fs-3xl:  2.25rem;     /* 36px — hero figures                        */

  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.55;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-wide: .02em;
  --tracking-caps: .06em;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */

  /* --- Radius ---------------------------------------------------------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);

  /* --- Focus ----------------------------------------------------------- */
  /* A single, always-visible focus treatment. Keyboard users must never have
     to guess where they are. */
  --focus-ring:        0 0 0 3px rgba(31, 77, 216, .28);
  --focus-ring-danger: 0 0 0 3px rgba(217, 45, 32, .25);
  --focus-ring-inset:  inset 0 0 0 2px var(--b-500);

  /* --- Motion ---------------------------------------------------------- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 260ms;

  /* --- Layering -------------------------------------------------------- */
  --z-base:      1;
  --z-sticky:    100;
  --z-topbar:    200;
  --z-sidebar:   300;
  --z-scrim:     400;
  --z-modal:     500;
  --z-popover:   600;
  --z-toast:     700;

  /* --- Layout ---------------------------------------------------------- */
  --content-max: 1600px;
  --tap-target:  44px;   /* WCAG 2.1 minimum touch target */
}

/* Honour a reduced-motion preference everywhere, once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
  }
}