/* ============================================================================
   Design tokens.

   This is the ONLY file that should contain raw colour, font, or size literals.
   Everything else in the app refers to these variables. To rebrand, edit the
   BRAND SEED block below and nothing else.

   The seed values are PLACEHOLDERS pending Peak's real brand assets.
   ========================================================================= */

:root {
  /* ── BRAND SEED ─────────────────────────────────────────────────────────
     Peak Mileage brand palette, taken from peakmiles.com (assets/css/peak.css).
     Every other colour in the app is derived from these via color-mix(), so the
     scales, hover states and dark theme all follow automatically.

     Note on the primary: Peak's headline orange is #ff601d, but at 3.02:1 on
     white it fails WCAG AA for buttons, links and text. --brand-primary is the
     INTERACTIVE colour and must pass, so it is set to Peak's own deeper orange
     #bf3c00 (5.44:1, passes AA). The vivid #ff601d lives in --brand-accent and
     is used for the logo mark and large decorative accents, where AA allows it. */
  --brand-primary:   #bf3c00;   /* Peak deep orange — actions, links, buttons (AA on white) */
  --brand-accent:    #ff601d;   /* Peak vivid orange — logo mark, large accents             */
  --brand-ink:       #122538;   /* Peak navy — darkest text                                 */
  --brand-paper:     #ffffff;   /* base surface                                             */
  --brand-neutral:   #47566b;   /* navy-tinted slate — harmonises greys with the brand navy */

  /* Status colours. Kept separate from brand: these carry meaning and should
     stay legible even if the brand palette shifts. */
  --status-success:  #15803d;
  --status-warning:  #b45309;
  --status-danger:   #b91c1c;
  --status-info:     #0369a1;

  /* ── DERIVED PRIMARY SCALE ──────────────────────────────────────────────
     color-mix() means we never hand-maintain tints and shades. */
  --primary-50:   color-mix(in oklab, var(--brand-primary) 6%,  white);
  --primary-100:  color-mix(in oklab, var(--brand-primary) 12%, white);
  --primary-200:  color-mix(in oklab, var(--brand-primary) 25%, white);
  --primary-400:  color-mix(in oklab, var(--brand-primary) 60%, white);
  --primary-500:  var(--brand-primary);
  --primary-600:  color-mix(in oklab, var(--brand-primary) 88%, black);
  --primary-700:  color-mix(in oklab, var(--brand-primary) 74%, black);
  --primary-800:  color-mix(in oklab, var(--brand-primary) 58%, black);

  /* ── DERIVED NEUTRAL SCALE ──────────────────────────────────────────── */
  --neutral-50:   color-mix(in oklab, var(--brand-neutral) 4%,  white);
  --neutral-100:  color-mix(in oklab, var(--brand-neutral) 8%,  white);
  --neutral-200:  color-mix(in oklab, var(--brand-neutral) 16%, white);
  --neutral-300:  color-mix(in oklab, var(--brand-neutral) 30%, white);
  --neutral-500:  var(--brand-neutral);
  --neutral-700:  color-mix(in oklab, var(--brand-neutral) 70%, black);
  --neutral-900:  var(--brand-ink);

  /* ── SEMANTIC SURFACES ──────────────────────────────────────────────────
     Views should use these, never the scales above. */
  --surface:            var(--brand-paper);
  --surface-sunken:     var(--neutral-50);
  --surface-raised:     var(--brand-paper);
  --surface-inverse:    var(--neutral-900);

  --ink:                var(--neutral-900);
  --ink-muted:          var(--neutral-700);
  --ink-subtle:         var(--neutral-500);
  --ink-inverse:        var(--brand-paper);
  --ink-on-primary:     #ffffff;

  /* The brand colour used AS TEXT on the page (links, active nav, eyebrows).
     Kept distinct from the numeric --primary-* ramp, which is used for FILLS
     (button backgrounds). On white both wanted the same dark orange, but on a
     dark surface text needs a LIGHT orange while a fill needs a dark one — so
     the two are separated here and re-pointed in the dark theme. */
  --primary-text:       var(--primary-600);

  --border:             var(--neutral-200);
  --border-strong:      var(--neutral-300);
  --focus-ring:         color-mix(in oklab, var(--brand-primary) 45%, transparent);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────
     Barlow is a DIN-style grotesque standing in for Peak's licensed DINMedium.
     Self-hosted (see wwwroot/fonts/barlow.css) so the strict CSP needs no
     external font host. The system stack after it is the fallback shown while
     Barlow loads (font-display: swap) and on the rare glyph outside its subset. */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  /* Fluid type scale. clamp() ties size to viewport without breakpoints. */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  1.3rem + 1vw,   2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);

  --leading-tight: 1.2;
  --leading-body:  1.6;

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

  /* ── SPACING (4px rhythm) ───────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ── RADIUS ─────────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 999px;

  /* ── ELEVATION ──────────────────────────────────────────────────────────
     Tinted with the brand hue rather than pure black — reads far less muddy. */
  --shadow-color: color-mix(in oklab, var(--brand-ink) 40%, transparent);
  --shadow-sm: 0 1px 2px -1px var(--shadow-color);
  --shadow-md: 0 2px 4px -2px var(--shadow-color), 0 4px 12px -4px var(--shadow-color);
  --shadow-lg: 0 4px 8px -4px var(--shadow-color), 0 12px 32px -8px var(--shadow-color);

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ── LAYOUT ─────────────────────────────────────────────────────────── */
  --header-height: 3.75rem;
  --content-max:   80rem;
}

/* ============================================================================
   Dark theme.

   Bound to Bootstrap's own [data-bs-theme] attribute so that our layer and
   Bootstrap's built-in dark mode switch together from a single toggle.
   ========================================================================= */
[data-bs-theme="dark"] {
  --brand-paper: #0f1419;
  --brand-ink:   #e6edf3;

  /* Fill ramp: stays dark and gets darker on hover/active, exactly like light
     mode, so white button text clears AA (white on #c8410a = 4.98). */
  --primary-500: #e34a0a;
  --primary-600: #c8410a;   /* button background */
  --primary-700: #a8360a;   /* button hover — darker, higher white contrast */
  --primary-800: #8a2d08;   /* button active */

  /* Subtle tints for pills/icon chips, mixed toward the dark base not white. */
  --primary-50:  color-mix(in oklab, var(--brand-accent) 20%, #0f1419);
  --primary-200: color-mix(in oklab, var(--brand-accent) 42%, #0f1419);

  /* Brand-as-text goes the OTHER way — a light vivid orange that clears AA on
     the near-black background (#ff8a5c on #0f1419 = 7.45). */
  --primary-text: #ff8a5c;

  --surface:         #161b22;
  --surface-sunken:  #0f1419;
  --surface-raised:  #1c232b;
  --surface-inverse: #e6edf3;

  --ink:         #e6edf3;
  --ink-muted:   #9aa7b2;
  --ink-subtle:  #6e7b87;
  --ink-inverse: #0f1419;

  --border:        #2b333c;
  --border-strong: #3d4650;

  --status-success: #4ade80;
  --status-warning: #fbbf24;
  --status-danger:  #f87171;
  --status-info:    #38bdf8;

  --shadow-color: rgb(0 0 0 / 0.6);
}

/* ============================================================================
   Bootstrap variable bridge.

   Bootstrap 5.3 is authored against CSS custom properties, so remapping its
   variables here re-themes every stock component in the app — cards, tables,
   alerts, pagination, forms — with no change to the existing view markup.
   ========================================================================= */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary:        var(--primary-500);
  --bs-primary-text-emphasis: var(--primary-text);
  --bs-primary-bg-subtle:     var(--primary-50);
  --bs-primary-border-subtle: var(--primary-200);
  --bs-link-color:       var(--primary-text);
  --bs-link-hover-color: color-mix(in oklab, var(--primary-text) 80%, var(--ink));

  --bs-body-bg:      var(--surface-sunken);
  --bs-body-color:   var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-secondary-bg:  var(--surface-sunken);
  --bs-tertiary-bg:   var(--surface-raised);
  --bs-border-color:  var(--border);

  --bs-body-font-family: var(--font-sans);
  --bs-body-line-height: var(--leading-body);

  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);

  --bs-success: var(--status-success);
  --bs-warning: var(--status-warning);
  --bs-danger:  var(--status-danger);
  --bs-info:    var(--status-info);
}

/* Tell the browser which theme its native widgets (scrollbars, date pickers,
   form controls) should render in. Driven off the same attribute.

   theme.js resolves the OS preference and stamps data-bs-theme onto <html>
   before first paint, so there is no flash and no third state to style here.
   With JavaScript disabled the attribute is absent and light is the default,
   which is a coherent fallback rather than a broken half-dark one. */
:root,
[data-bs-theme="light"] { color-scheme: light; }
[data-bs-theme="dark"]  { color-scheme: dark; }