/* ══════════════════════════════════════════════════════════════════
   LAYER 1 — brand foundation.  Mode-independent.

   Nine colours and one radius. To rebrand, edit these ten values and
   nothing else.

   Stored as raw HSL triplets WITHOUT hsl() so alpha can be composed
   onto them — hsl(var(--signal-ok) / 0.15). That single trick is what
   lets one variable per colour serve every opacity in the system.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --brand-yellow:     43 90% 54%;  /* #F3B620 */
  --brand-orange:     17 84% 64%;  /* #F08055 */
  --brand-red:       351 66% 41%;  /* #AF2438 */
  --brand-blue:      218 44% 42%;  /* #3D5F9B */

  --brand-black:      0 0% 7%;     /* #131313 — the only black; never #000 */
  --brand-dark-grey:  0 0% 12%;    /* #1E1E1E */
  --brand-grey:       0 0% 55%;    /* #8B8B8B */
  --brand-light-grey: 0 0% 93%;    /* #EDEDED */
  --brand-white:      0 0% 100%;

  --radius: 0.9375rem;             /* 15px — every other radius derives from this */
}

/* ══════════════════════════════════════════════════════════════════
   LAYER 2 — semantics.  Mode-dependent.

   Light and dark flip canvas and ink only. Accent FILLS are identical
   in both modes; only the text-legible -ink variants shift lightness
   to clear contrast on their ground.
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --background:            var(--brand-light-grey);
  --foreground:            var(--brand-black);
  --card:                  var(--brand-white);
  --card-foreground:       var(--brand-black);
  --popover:               var(--brand-white);
  --popover-foreground:    var(--brand-black);

  --primary:               var(--brand-yellow);   /* identical in both modes */
  --primary-foreground:    var(--brand-black);    /* yellow always carries black */

  --secondary:             var(--brand-black);    /* inverted "selected" surface */
  --secondary-foreground:  var(--brand-light-grey);

  --accent:                0 0% 96%;              /* raised tile inside a card */
  --muted-foreground:      0 0% 42%;              /* darkened to clear AA on light */
  --input:                 var(--brand-white);
  --ring:                  var(--brand-yellow);

  /* Full-strength on purpose — only ever consumed at 0.07–0.14 alpha, so one
     token gives a hairline that reads correctly on either canvas. */
  --border:                var(--brand-black);

  /* ── The signal system. Colour is meaning, and there are exactly four. ──
     ok    · what we contributed · on track · assessed and passing
     watch · in flight · needs an eye
     risk  · act now
     data  · came from somewhere else — never health, never ours

     There is no green. Every escalation in the product runs the same
     ramp: yellow → orange → red. */
  --signal-ok:    var(--brand-yellow);
  --signal-watch: var(--brand-orange);
  --signal-risk:  var(--brand-red);
  --signal-data:  var(--brand-blue);

  /* Ink variants. Contrast measured against --card (#FFFFFF), which is where
     text in this system actually sits. Re-measure if a brand hue changes;
     that is the only maintenance the colour system needs. */
  --signal-ok-ink:    43 90% 27%;        /* 5.79:1 on white */
  --signal-watch-ink: 17 84% 34%;        /* 6.91:1 on white */
  --signal-risk-ink:  var(--brand-red);  /* 6.79:1 on white */
  --signal-data-ink:  var(--brand-blue); /* 6.40:1 on white */
}

.dark {
  color-scheme: dark;

  --background:            var(--brand-black);
  --foreground:            var(--brand-light-grey);
  --card:                  var(--brand-dark-grey);
  --card-foreground:       var(--brand-light-grey);
  --popover:               var(--brand-dark-grey);
  --popover-foreground:    var(--brand-light-grey);

  --primary:               var(--brand-yellow);
  --primary-foreground:    var(--brand-black);

  --secondary:             var(--brand-light-grey);
  --secondary-foreground:  var(--brand-black);

  --accent:                0 0% 16%;
  --muted-foreground:      var(--brand-grey);
  --input:                 0 0% 16%;
  --ring:                  var(--brand-yellow);

  --border:                var(--brand-white);

  --signal-ok:    var(--brand-yellow);
  --signal-watch: var(--brand-orange);
  --signal-risk:  var(--brand-red);
  --signal-data:  var(--brand-blue);

  /* Measured against --card (#1E1E1E). */
  --signal-ok-ink:    var(--brand-yellow);    /* 9.19:1 on #1E1E1E */
  --signal-watch-ink: var(--brand-orange);    /* 6.33:1 on #1E1E1E */
  --signal-risk-ink:  351 70% 65%;            /* 5.16:1 on #1E1E1E */
  --signal-data-ink:  218 50% 66%;            /* 6.01:1 on #1E1E1E */
}

/* ── Derived radius scale ──
   One variable, five steps. Nesting reads correctly by construction: an
   inner element is smaller-radius than its container without anyone
   eyeballing it. */
:root {
  --r-sm:  calc(var(--radius) - 8px);   /*  7px  inner controls */
  --r-md:  calc(var(--radius) - 4px);   /* 11px  buttons, nav pills */
  --r-lg:  var(--radius);               /* 15px  cards */
  --r-xl:  calc(var(--radius) + 3px);   /* 18px  hero panel */
  --r-2xl: calc(var(--radius) + 7px);   /* 22px  dialogs */
}

/* ── The house easing curve ──
   ease-out-quint: fast start, long settle. Everything that ramps uses it,
   which is why the dial and the numbers land together. */
:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-strong: 0 24px 60px -18px hsl(var(--brand-black) / 0.45);
}