/* ── Semantic theme tokens — duplicate of static/css/booking.css :root ──
   This file exists ONLY for the two pages that never load booking.css
   (signin.html, and error_500.html's own nav override — error_500.html
   otherwise extends base.html): they still need --surface/--text/--action/
   etc. to resolve before paint. Every other page loads booking.css, which
   is the canonical copy — keep the two in sync by hand.

   See booking.css's own header comment for the naming rule and the
   PROVISIONAL status-colour note; not repeated here to avoid the two
   comments drifting out of sync with each other instead. */
:root {
  color-scheme: light dark;

  --brand-navy: #001f2b;
  --brand-teal: #00425a;
  --brand-yellow: #ffcb41;
  --brand-aqua: #1eabe2;
  --brand-coolgrey: #e2ebee;
  --brand-sky: #95dcf8;

  --surface: #f4f8f9;
  --surface-raised: #ffffff;
  --surface-sunken: #eef3f5;
  --border: #dce6ea;
  --border-strong: #c5d3da;
  /* --border-soft — the soft sibling of --border; canonical comment lives
     in booking.css's :root block. Mirrored here by hand. */
  --border-soft: #e8eff2;
  --text: var(--brand-navy);
  --text-muted: #5e7886;
  --text-subtle: #88a0ac;

  --action: var(--brand-teal);
  --action-hover: var(--brand-navy);
  --action-text: #ffffff;
  --action-secondary: var(--brand-aqua);
  --action-secondary-text: var(--brand-navy);
  --action-primary: var(--brand-yellow);
  --action-primary-hover: #f5c030;
  --action-primary-ink: var(--brand-navy);

  --link: var(--brand-teal);
  --link-hover: var(--brand-navy);
  --link-bg: #eaf6ff;
  --link-border: #a9dcf5;
  --link-hover-bg: #dbf1fb;
  --link-hover-border: #93c5fd;

  --good-bg: #e7f8f1;
  --good-border: #bee9d8;
  --good-ink: #176d4b;
  --good-solid: #1b7e56;
  --good-fill: #cdeee1;
  --good-fill-strong: #b6e7d3;

  --warn-bg: #fff7e6;
  --warn-border: #f0dcae;
  --warn-ink: #7a5c10;
  --warn-solid: var(--brand-yellow);
  --warn-solid-ink: var(--brand-navy);

  --danger-bg: #fceded;
  --danger-border: #edb6b6;
  --danger-ink: #db0000;
  --danger-solid: #db0000;
  --danger-hover-bg: #fff5f5;
  --danger-hover-border: #faa8a8;

  /* Filled danger CONTROL — distinct from --danger-ink, which is INK
     meant for text/icons on a tinted --danger-bg, not for filling a
     solid control itself. See booking.css's own :root comment for why. */
  --danger-fill: #eb0000;
  --danger-fill-ink: #ffffff;

  /* --imminent-* — "this is about to start" (urgency about TIME).
     Deliberately a SEPARATE role from --warn-*, which means "quality is
     at stake" (the transcript's amber). They alias the same literals
     today ONLY because the brand owner has not yet ruled on amber (see
     booking.css's PROVISIONAL note) — do NOT collapse these two
     families; when amber is decided, imminent and warn may need to
     diverge. */
  /* The spec's own values for this row, adopted literally. The accent is
     brand yellow because that is what the mockup marks urgency WITH -- an
     earlier pass used the dark ink here instead, on my instruction, and the
     result was a heavy brown slab where the design has a warm wash. Yellow
     is a PRIMARY brand colour, so a yellow call to action here is on-brand
     as well as on-spec; the anti-inversion rule is about aqua, not yellow. */
  /* A row sits a hair off the sheet it is on. The mockup's plain rows are
     #fbfcfd on a white card -- barely a tint, but without it a white row on
     a white page is defined by its border alone and the list reads flat. */
  --surface-row: #fbfcfd;

  --imminent-bg: #fff6e0;
  --imminent-border: rgba(255, 203, 65, .45);
  --imminent-ink: #8a6a13;
  --imminent-accent: var(--brand-yellow);
  --imminent-solid: var(--brand-yellow);
  --imminent-solid-ink: var(--brand-navy);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0b161c;
    --surface-raised: #12232b;
    --surface-sunken: #1a2e37;
    --border: #274752;
    --border-strong: #375c68;
    --border-soft: #1e3742;
    --text: #eaf3f6;
    --text-muted: #9cb6c0;
    --text-subtle: #7d97a2;

    /* Brand teal at its literal hex is a 1.68:1 fill against this ground --
       the primary button stops reading as a button at all (it is 10.19:1
       on the light ground). Lifted in lightness only: hue 195 deg vs the
       brand's 196 deg, so it is the same teal, not a different colour, and
       aqua is NOT promoted here -- that would reinstate exactly the
       primary/secondary inversion this work set out to fix. 3.41:1 against
       the ground clears the 3:1 floor for a non-text UI component, and
       white on it is 5.37:1. */
    --action: #0d7396;
    --action-hover: #1eabe2;
    --action-text: #ffffff;
    --action-secondary: var(--brand-aqua);
    --action-secondary-text: var(--brand-navy);
    --action-primary-hover: #ffd968;

    --link: #5fc2ea;
    --link-hover: #95dcf8;
    --link-bg: #123544;
    --link-border: #2a5568;
    --link-hover-bg: #163c4d;
    --link-hover-border: #386880;

    --good-bg: #123627;
    --good-border: #205b43;
    --good-ink: #5bdca8;
    --good-solid: #24a873;
    --good-fill: #1f4c3a;
    --good-fill-strong: #245c45;

    --warn-bg: #3a2e0d;
    --warn-border: #6b5420;
    --warn-ink: #f0c750;
    --warn-solid: var(--brand-yellow);
    --warn-solid-ink: var(--brand-navy);

    --danger-bg: #3d0f0f;
    --danger-border: #6b2929;
    --danger-ink: #ff4d4d;
    --danger-solid: #ff4d4d;
    --danger-hover-bg: #4b1616;
    --danger-hover-border: #7e3030;

    /* Filled danger CONTROL — distinct from --danger-ink (see :root
       comment). --danger-ink here is #ff4d4d; white text on it is
       2.07:1, badly failing 4.5:1 on a control hit in a hurry mid
       meeting, so the filled control gets its own darker-ground pair. */
    --danger-fill: #ff0000;
    --danger-fill-ink: #2a0b0b;

    /* --imminent-* — see :root comment: a deliberately separate role
       from --warn-*, aliasing it only until the brand owner rules on
       amber. Do NOT collapse these two families. */
    --surface-row: #10202a;
    --surface-row: #10202a;
  --imminent-bg: var(--warn-bg);
    --imminent-border: var(--warn-border);
    --imminent-ink: var(--warn-ink);
    --imminent-accent: var(--brand-yellow);
    --imminent-solid: var(--brand-yellow);
    --imminent-solid-ink: var(--brand-navy);
  }
}
/* .tr-capture-surface — the CAPTURE screens are dark in every theme.
   This is not a dark-mode variant: the mockup draws screens 02 (choose a
   source), 03 (recording) and 04 (the in-Meet bar) on a dark ground while
   01, 05 and 07 stay light. Capturing and reading are different modes, and
   the design says so with the ground. An early audit of mine wrote this off
   as "the spec is dark, our app is light" and it was the single biggest
   reason those two screens never resembled the design.

   It shares this selector so there is exactly one copy of the dark palette
   to keep in step -- see the test asserting the dark blocks agree. */
:root[data-theme="dark"], .tr-capture-surface {
  color-scheme: dark;
  --surface: #0b161c;
  --surface-raised: #12232b;
  --surface-sunken: #1a2e37;
  --border: #274752;
  --border-strong: #375c68;
  --border-soft: #1e3742;
  --text: #eaf3f6;
  --text-muted: #9cb6c0;
  --text-subtle: #7d97a2;

    /* Brand teal at its literal hex is a 1.68:1 fill against this ground --
       the primary button stops reading as a button at all (it is 10.19:1
       on the light ground). Lifted in lightness only: hue 195 deg vs the
       brand's 196 deg, so it is the same teal, not a different colour, and
       aqua is NOT promoted here -- that would reinstate exactly the
       primary/secondary inversion this work set out to fix. 3.41:1 against
       the ground clears the 3:1 floor for a non-text UI component, and
       white on it is 5.37:1. */
  --action: #0d7396;
  --action-hover: #1eabe2;
  --action-text: #ffffff;
  --action-secondary: var(--brand-aqua);
  --action-secondary-text: var(--brand-navy);
  --action-primary-hover: #ffd968;

  --link: #5fc2ea;
  --link-hover: #95dcf8;
  --link-bg: #123544;
  --link-border: #2a5568;
  --link-hover-bg: #163c4d;
  --link-hover-border: #386880;

  --good-bg: #123627;
  --good-border: #205b43;
  --good-ink: #5bdca8;
  --good-solid: #24a873;
    --good-fill: #1f4c3a;
    --good-fill-strong: #245c45;

  --warn-bg: #3a2e0d;
  --warn-border: #6b5420;
  --warn-ink: #f0c750;
  --warn-solid: var(--brand-yellow);
  --warn-solid-ink: var(--brand-navy);

  --danger-bg: #3d0f0f;
  --danger-border: #6b2929;
  --danger-ink: #ff4d4d;
  --danger-solid: #ff4d4d;
  --danger-hover-bg: #4b1616;
  --danger-hover-border: #7e3030;

  /* Filled danger CONTROL — distinct from --danger-ink (see :root
     comment). --danger-ink here is #ff4d4d; white text on it is
     2.07:1, badly failing 4.5:1 on a control hit in a hurry mid
     meeting, so the filled control gets its own darker-ground pair. */
  --danger-fill: #ff0000;
  --danger-fill-ink: #2a0b0b;

  /* --imminent-* — see :root comment: a deliberately separate role
     from --warn-*, aliasing it only until the brand owner rules on
     amber. Do NOT collapse these two families. */
  /* The spec's own values for this row, adopted literally. The accent is
     brand yellow because that is what the mockup marks urgency WITH -- an
     earlier pass used the dark ink here instead, on my instruction, and the
     result was a heavy brown slab where the design has a warm wash. Yellow
     is a PRIMARY brand colour, so a yellow call to action here is on-brand
     as well as on-spec; the anti-inversion rule is about aqua, not yellow. */
  --surface-row: #10202a;
  --imminent-bg: var(--warn-bg);
  --imminent-border: var(--warn-border);
  --imminent-ink: var(--warn-ink);
  --imminent-accent: var(--brand-yellow);
  --imminent-solid: var(--brand-yellow);
  --imminent-solid-ink: var(--brand-navy);
}

/* The manual toggle must drive the UA's own form-control chrome, not
   just our tokens: `light dark` re-consults the OS, so forcing dark on a
   light-OS machine left native date/time pickers rendering light chrome
   (dark glyphs, dark placeholder segments) inside a dark field. */
:root[data-theme="light"] { color-scheme: light; }