/* ═══════════════════════════════════════════════════════════════════
   AuBurn CORE — design tokens ("2a" direction)
   Drop-in replacement for the theming half of wwwroot/css/site.css.

   Load order in _Layout.cshtml:
     1. bootstrap.min.css
     2. datatables-bs5/dataTables.bootstrap5.min.css   (auth only)
     3. tokens.css      ← this file
     4. components.css
     5. bootstrap-icons.min.css
     6. font-awesome/all.min.css

   HOW THIS WORKS — read this before editing anything.

   Every colour in the app comes from a SEMANTIC token below. Tokens are
   defined twice: once for light, once for dark. Nothing in the app is
   allowed to name a raw hex value, and nothing is allowed to set a
   background without also being able to name the ink that sits on it.
   That pairing is what fixes "text disappears in dark mode": the old
   sheet applied `bg-white` / `bg-light` / `#fff` to surfaces whose text
   colour switched with the theme, so in dark mode you got #dee2e6 text
   on a #ffffff card footer.

   Bootstrap's own variables are re-pointed at these tokens, so existing
   markup (.card, .table, .form-control, .dropdown-menu, .modal…) inherits
   the new system with no Razor changes. Screens then get migrated off the
   fixed-colour utilities one at a time — see README.md § Banned utilities.

   Brand hexes are unchanged in light mode:
     #00A896 bright teal · #008B8B medium teal · #005F73 dark teal · #003366 navy
   Dark mode uses lightened siblings of the same hues, because #00A896 text
   on a dark surface fails WCAG AA (2.9:1) while #19C0AC passes (5.6:1).
   ═══════════════════════════════════════════════════════════════════ */

/* ── LIGHT (default) ─────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  /* Brand — raw ramp. Reference these ONLY from the semantic tokens below. */
  --core-teal-500:      #00A896;
  --core-teal-600:      #008B8B;
  --core-teal-700:      #005F73;
  --core-navy-800:      #003366;
  --core-teal-400:      #19C0AC;   /* dark-mode accent */
  --core-teal-300:      #4ED6C3;   /* dark-mode accent text */

  /* Surfaces — 4 levels, darkest ink on lightest ground */
  --core-canvas:        #f2f5f7;   /* page background */
  --core-surface:       #ffffff;   /* cards, panels, table ground */
  --core-surface-2:     #f5f8fa;   /* card headers, toolbars, striped rows */
  --core-surface-3:     #e9eff2;   /* chips, inset wells, hover targets */

  /* Ink — always paired with a surface, never used on a fixed colour */
  --core-ink:           #16232b;   /* body text, 13.9:1 on surface */
  --core-ink-2:         #4f6270;   /* secondary text, 6.6:1 */
  --core-ink-3:         #7d8e99;   /* labels, meta, 3.6:1 — never body copy */

  /* Lines */
  --core-line:          #e0e7eb;   /* hairlines, table rules */
  --core-line-strong:   #c8d3d9;   /* input borders, focus-adjacent */

  /* Chrome — the rail and nav panel. Deliberately dark in BOTH themes:
     switching the theme should change the work area, not the furniture. */
  --core-chrome:        #04161b;
  --core-chrome-ink:    #dff1ef;
  --core-chrome-ink-2:  #7e9a9d;
  --core-chrome-line:   #0c2429;

  /* Accent + status. `-quiet` is the tinted background, plain is the ink. */
  --core-accent:        var(--core-teal-500);
  --core-accent-ink:    #ffffff;                 /* text ON accent */
  --core-accent-text:   #00776a;                 /* accent AS text, 4.7:1 */
  --core-accent-quiet:  rgba(0, 168, 150, .10);

  --core-ok:            #008B8B;
  --core-ok-quiet:      rgba(0, 139, 139, .12);
  --core-warn:          #8a6a00;                 /* darkened: #ffc107 text fails AA */
  --core-warn-quiet:    rgba(255, 193, 7, .18);
  --core-danger:        #b02a37;
  --core-danger-quiet:  rgba(176, 42, 55, .10);
  --core-info:          #005F73;
  --core-info-quiet:    rgba(0, 95, 115, .10);

  /* Cycle department colours (Facility / Control / Strip × Start / Delivery) */
  --core-cyc-facility-start:     #198754;
  --core-cyc-facility-delivery:  #b02a37;
  --core-cyc-control-start:      #6f42c1;
  --core-cyc-control-delivery:   #0d6efd;
  --core-cyc-strip-start:        #d63384;
  --core-cyc-strip-delivery:     #b35a00;

  /* Shape, elevation, motion */
  --core-r:             12px;
  --core-r-sm:          8px;
  --core-r-xs:          6px;
  --core-r-pill:        999px;
  --core-shadow:        0 1px 2px rgba(16, 35, 43, .06), 0 8px 24px -12px rgba(16, 35, 43, .18);
  --core-shadow-sm:     0 1px 2px rgba(16, 35, 43, .05);
  --core-scrim:         rgba(16, 35, 43, .45);
  --core-focus:         0 0 0 3px rgba(0, 168, 150, .30);
  --core-ease:          .15s ease;

  /* Type — no webfont; Segoe UI is already on every workstation */
  --core-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --core-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* ── Re-point Bootstrap at the tokens ─────────────────────────── */
  --bs-body-bg:              var(--core-canvas);
  --bs-body-color:           var(--core-ink);
  --bs-emphasis-color:       var(--core-ink);
  --bs-secondary-color:      var(--core-ink-2);
  --bs-tertiary-color:       var(--core-ink-3);
  --bs-secondary-bg:         var(--core-surface-3);
  --bs-tertiary-bg:          var(--core-surface-2);
  --bs-border-color:         var(--core-line);
  --bs-border-radius:        var(--core-r-sm);
  --bs-border-radius-sm:     var(--core-r-xs);
  --bs-border-radius-lg:     var(--core-r);
  --bs-body-font-family:     var(--core-font);

  --bs-primary:              var(--core-accent);
  --bs-primary-rgb:          0, 168, 150;
  --bs-success:              var(--core-ok);
  --bs-success-rgb:          0, 139, 139;
  --bs-info:                 var(--core-info);
  --bs-info-rgb:             0, 95, 115;
  --bs-danger:               var(--core-danger);
  --bs-warning:              var(--core-warn);

  --bs-link-color:           var(--core-accent-text);
  --bs-link-hover-color:     var(--core-info);

  --bs-card-bg:              var(--core-surface);
  --bs-card-border-color:    var(--core-line);
  --bs-card-cap-bg:          var(--core-surface-2);

  /* These four are what the old sheet hardcoded. Utilities that read them
     (.bg-light, .bg-white, .text-muted, .table-*) now follow the theme. */
  --bs-light:                var(--core-surface-2);
  --bs-light-rgb:            245, 248, 250;
  --bs-white:                var(--core-surface);
  --bs-white-rgb:            255, 255, 255;

  /* RGB twins. Bootstrap's rgba()-based components (.toast, .text-body,
     .bg-body-tertiary…) read these, not the plain vars above — leaving them
     unpointed is why toasts and .text-body titles broke in dark mode. */
  --bs-body-bg-rgb:          242, 245, 247;
  --bs-body-color-rgb:       22, 35, 43;
  --bs-secondary-color-rgb:  79, 98, 112;
  --bs-tertiary-color-rgb:   125, 142, 153;
  --bs-secondary-bg-rgb:     233, 239, 242;
  --bs-tertiary-bg-rgb:      245, 248, 250;
}

/* ── DARK ────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --core-canvas:        #0d1418;
  --core-surface:       #152026;
  --core-surface-2:     #1c2a31;
  --core-surface-3:     #24353d;

  --core-ink:           #e7eef1;   /* 13.2:1 on surface */
  --core-ink-2:         #a3b4bd;   /* 7.4:1 */
  --core-ink-3:         #7b8d97;   /* 4.5:1 */

  --core-line:          #243239;
  --core-line-strong:   #33444d;

  --core-chrome:        #020a0c;
  --core-chrome-ink:    #dff1ef;
  --core-chrome-ink-2:  #6d8a8d;
  --core-chrome-line:   #0d1d21;

  --core-accent:        var(--core-teal-400);
  --core-accent-ink:    #04231f;   /* dark ink on a light-teal fill */
  --core-accent-text:   var(--core-teal-300);
  --core-accent-quiet:  rgba(25, 192, 172, .14);

  --core-ok:            #2fb6a8;
  --core-ok-quiet:      rgba(47, 182, 168, .14);
  --core-warn:          #e2b64c;
  --core-warn-quiet:    rgba(226, 182, 76, .16);
  --core-danger:        #ff6f74;
  --core-danger-quiet:  rgba(255, 111, 116, .14);
  --core-info:          #57a9c0;
  --core-info-quiet:    rgba(87, 169, 192, .14);

  --core-cyc-facility-start:     #46b97e;
  --core-cyc-facility-delivery:  #ff6f74;
  --core-cyc-control-start:      #a98aec;
  --core-cyc-control-delivery:   #5a9bff;
  --core-cyc-strip-start:        #ef7ab4;
  --core-cyc-strip-delivery:     #f0954a;

  --core-shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --core-shadow-sm:     0 1px 2px rgba(0, 0, 0, .35);
  --core-scrim:         rgba(0, 0, 0, .6);
  --core-focus:         0 0 0 3px rgba(25, 192, 172, .35);

  --bs-primary-rgb:     25, 192, 172;
  --bs-success-rgb:     47, 182, 168;
  --bs-info-rgb:        87, 169, 192;
  --bs-danger-rgb:      255, 111, 116;
  --bs-warning-rgb:     226, 182, 76;
  --bs-light-rgb:       28, 42, 49;
  --bs-white-rgb:       21, 32, 38;

  /* RGB twins — keep dark components on OUR surfaces/ink instead of
     Bootstrap's own gray dark palette (#212529 family). */
  --bs-body-bg-rgb:          13, 20, 24;
  --bs-body-color-rgb:       231, 238, 241;
  --bs-secondary-color-rgb:  163, 180, 189;
  --bs-tertiary-color-rgb:   123, 141, 151;
  --bs-secondary-bg-rgb:     36, 53, 61;
  --bs-tertiary-bg-rgb:      28, 42, 49;
  --bs-border-color-translucent: rgba(255, 255, 255, .15);
}

/* Follow the OS when the user has expressed no preference.
   Render <html data-bs-theme="auto"> when ApplicationUser.PrefersDarkMode is
   null, and keep writing "light"/"dark" once they choose. */
@media (prefers-color-scheme: dark) {
  [data-bs-theme="auto"] {
    color-scheme: dark;
    /* Duplicate of the [data-bs-theme="dark"] block above. Keep in sync, or
       build both from one SCSS map / CSS @property set. */
    --core-canvas:#0d1418; --core-surface:#152026; --core-surface-2:#1c2a31; --core-surface-3:#24353d;
    --core-ink:#e7eef1; --core-ink-2:#a3b4bd; --core-ink-3:#7b8d97;
    --core-line:#243239; --core-line-strong:#33444d;
    --core-chrome:#020a0c; --core-chrome-ink:#dff1ef; --core-chrome-ink-2:#6d8a8d; --core-chrome-line:#0d1d21;
    --core-accent:var(--core-teal-400); --core-accent-ink:#04231f;
    --core-accent-text:var(--core-teal-300); --core-accent-quiet:rgba(25,192,172,.14);
    --core-ok:#2fb6a8; --core-ok-quiet:rgba(47,182,168,.14);
    --core-warn:#e2b64c; --core-warn-quiet:rgba(226,182,76,.16);
    --core-danger:#ff6f74; --core-danger-quiet:rgba(255,111,116,.14);
    --core-info:#57a9c0; --core-info-quiet:rgba(87,169,192,.14);
    --core-cyc-facility-start:#46b97e; --core-cyc-facility-delivery:#ff6f74;
    --core-cyc-control-start:#a98aec; --core-cyc-control-delivery:#5a9bff;
    --core-cyc-strip-start:#ef7ab4; --core-cyc-strip-delivery:#f0954a;
    --core-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --core-shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --core-scrim:rgba(0,0,0,.6);
    --core-focus:0 0 0 3px rgba(25,192,172,.35);
    --bs-primary-rgb:25,192,172; --bs-success-rgb:47,182,168; --bs-info-rgb:87,169,192;
    --bs-danger-rgb:255,111,116; --bs-warning-rgb:226,182,76;
    --bs-light-rgb:28,42,49; --bs-white-rgb:21,32,38;
    --bs-body-bg-rgb:13,20,24; --bs-body-color-rgb:231,238,241;
    --bs-secondary-color-rgb:163,180,189; --bs-tertiary-color-rgb:123,141,151;
    --bs-secondary-bg-rgb:36,53,61; --bs-tertiary-bg-rgb:28,42,49;
    --bs-border-color-translucent:rgba(255,255,255,.15);
  }
}
/* NOTE: "auto" is normally resolved to a concrete dark/light attribute by a
   pre-paint script in _Layout.cshtml, which lets Bootstrap's own compiled
   [data-bs-theme="dark"] component rules apply. The media block above is the
   no-JS fallback only. */

/* Declare the scheme so native widgets (scrollbars, date pickers, the
   type="time" and type="date" inputs on Route Builder and Cycle Schedule)
   render dark. Missing this is why those controls stayed white before. */
:root, [data-bs-theme="light"] { color-scheme: light; }
[data-bs-theme="dark"]         { color-scheme: dark; }
/* Must repeat here: the bare :root rule above is later in the file than the
   auto block, so it would otherwise win the tie and keep native widgets light. */
@media (prefers-color-scheme: dark) {
  [data-bs-theme="auto"]       { color-scheme: dark; }
}

html { font-size: 16px; }
body {
  background: var(--core-canvas);
  color: var(--core-ink);
  font-family: var(--core-font);
  font-size: .875rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a       { color: var(--core-accent-text); text-decoration: none; }
a:hover { color: var(--core-info); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--core-focus); }