/* Pathkosh — design tokens.
   ────────────────────────────────────────────────────────────────────────────
   Every real colour in this project is here. Everything downstream is var()
   indirection, so a re-brand is this file and nothing else.

   TWO PLACES MIRROR THESE VALUES and cannot read a CSS variable:
     • <meta name="theme-color"> in app/Views/layouts/site.php
     • the literal hexes in app/Support/MailTemplate.php — mail clients do not
       support custom properties, external CSS, or reliably even <style>
   Change those by hand when --brand changes, or the browser chrome and every
   outgoing email keep the old colour.

   The palette is a deep indigo with a saffron accent: institutional enough for
   a procurement conversation, warm enough not to read as a bank. Deliberately
   nothing like the LMS template's neutral slate — that is the product a client
   re-brands for themselves, this is the vendor.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* Primary — deep indigo */
  --brand-900: #0B1730;
  --brand-800: #12233F;
  --brand-700: #152A52;
  --brand-600: #1E3A6E;   /* PRIMARY — mirrored in theme-color + MailTemplate */
  --brand-500: #2C5091;
  --brand-400: #4E74B4;
  --brand-300: #8CA5CE;
  --brand-200: #C2D0E5;
  --brand-100: #E4EAF5;
  --brand-50:  #F2F5FA;

  /* Accent — saffron. Decorative and large text only at 600 (3.4:1);
     use --accent-ink for anything smaller, which clears 5.6:1. */
  --accent-600: #C8791B;
  --accent-ink: #96590E;
  --accent-100: #FBF0DE;
  --accent-50:  #FDF8F0;

  /* Neutral ink, faintly cool so it sits with the indigo */
  --ink-900: #12161F;
  --ink-800: #1E2531;
  --ink-700: #333B4A;
  --ink-600: #4A5462;
  --ink-500: #616B7D;
  --ink-400: #8B95A4;
  --ink-300: #AEB6C2;
  --ink-200: #D8DDE5;
  --ink-100: #EDF0F4;
  --ink-50:  #F6F8FA;
  --white:   #FFFFFF;

  --green-600: #1B8A5A;
  --green-100: #E2F4EC;
  --amber-600: #B77A0B;
  --amber-100: #FBF0D8;
  --red-600:   #C2413F;
  --red-100:   #FBE9E8;

  /* ---- Semantic aliases: what the stylesheet actually uses ---- */
  --brand:         var(--brand-600);
  --brand-strong:  var(--brand-700);
  --accent:        var(--accent-600);

  --text:          var(--ink-700);
  --heading:       var(--ink-900);
  --muted:         var(--ink-500);
  --faint:         var(--ink-400);   /* ~3:1 — decoration and large text only */
  --on-brand:      var(--white);

  --surface:       var(--white);
  --surface-alt:   var(--ink-50);
  --surface-tint:  var(--brand-50);
  --line:          var(--ink-200);
  --line-soft:     var(--ink-100);
  --focus:         var(--brand-500);

  --radius:     14px;
  --radius-sm:  9px;
  --radius-pill: 999px;

  /* Shadows are the one place a colour is written as decimal rgba rather than
     a token, which is exactly why a re-brand forgets them. Keep them in step
     with --ink-900 (#12161F = 18,22,31). */
  --shadow-sm: 0 1px 2px rgba(18, 22, 31, .06);
  --shadow-md: 0 6px 20px rgba(18, 22, 31, .08);
  --shadow-lg: 0 18px 44px rgba(18, 22, 31, .12);

  --ease: cubic-bezier(.22, 1, .36, 1);

  --measure: 68ch;      /* comfortable reading width */
  --container: 1120px;
}

/* Dark mode. NOT an inversion — inverting a deep indigo gives mud. Instead the
   brand LIGHTENS (600 → 300) so it still reads against a dark canvas, and
   --on-brand flips to near-black because white on a light indigo would fail.
   Measured on this pairing: body text 11.7:1, links 7.4:1, button label 7.1:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand:        var(--brand-300);
    --brand-strong: var(--brand-200);
    --accent:       #E9A445;
    --accent-ink:   #E9A445;

    --text:         #C7CEDA;
    --heading:      #F1F4F8;
    --muted:        #939DAD;
    --faint:        #6E7889;
    --on-brand:     #0B1730;

    --surface:      #10141C;
    --surface-alt:  #161C27;
    --surface-tint: #161F31;
    --line:         #29313F;
    --line-soft:    #1E2531;
    --focus:        var(--brand-300);

    /* Ambient shadow does almost nothing on a dark canvas; deepen it or cards
       lose their edge entirely. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  }
}