/* ─────────────────────────────────────────────────────────────────────────────
   COPY. This file is a verbatim copy of
   src/HalfCall.Web/wwwroot/css/tokens.css, taken so that the public site is
   self-contained and has no build step.

   The app is the source of truth. If a token changes there, copy this file
   again — do not edit it here. See site/README.md.
   ───────────────────────────────────────────────────────────────────────────── */

/* HalfCall design tokens.

   The single source of colour, type, depth and metric for the whole product. Every value
   here is lifted verbatim from the `halfcall-design` skill and the approved artboards; if
   a screen needs a colour that is not in this file, the answer is a new token, not a hex
   literal in a view.

   THE TWO THEMES. They are not "light" and "dark", they are the two states of a real
   theatre, and a stage manager reads them instantly:

     Working light — the bare working bulb on stage during rehearsal and get-in.
                     Practical, unglamorous, on. Paper-white surfaces, real depth,
                     a confident Bodoni. This is the default.
     Dark house    — auditorium dark, the stage lit. Performance. The ground drops to
                     #0B0B0F, the surfaces sit just above it, and the amber behaves like
                     an actual lamp: it glows, it blooms, it washes the top of the page.

   The stored values stay `light` and `dark` — the machine names — because they are what
   `data-theme` and `prefers-color-scheme` speak. Only the words a member reads changed.

   The three-block rule from the skill, and it matters: the FULL light palette is
   declared on bare `:root`, so every colour has a definition that does not depend on a
   media query. The dark palette is then declared twice — once under
   `@media (prefers-color-scheme: dark)` guarded by `:root:not([data-theme="light"])`,
   so the system preference wins when the member has not chosen; and once under
   `[data-theme="dark"]`, so an explicit choice wins in both directions.

   The two explicit blocks are attribute selectors rather than `:root[data-theme=…]`, which
   costs nothing on the html element and buys one thing: any element can carry a theme.
   That is what lets /styleguide show both themes on one page, side by side, from these
   same definitions rather than from a second copy that would drift.

   Depth is a token, never a component's own idea. `--shadow`, `--shadow-lift`,
   `--surface-lift`, `--glow`, `--glow-text`, `--bloom`, `--wash` and `--accent-lift` are
   defined once per theme; a card asks for `var(--shadow)` and gets whichever theatre it
   is standing in. Nothing in app.css hard-codes a shadow or a glow. */

:root {
  /* ---- surfaces and ink (cool neutrals — grey with a blue bias, never warm cream) ---- */
  --paper: #EAEAEF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F8;
  --surface-3: #EEEEF2;
  --ink: #17171E;
  --ink-2: #4B4B58;
  --ink-3: #666672;
  --rule: #DBDBE2;
  --rule-2: #E9E9EE;

  /* ---- accent: the stage amber, the working light. Used sparingly. ---- */
  --accent: #A8630A;
  --accent-2: #8A5108;
  --accent-wash: #F9F0E0;

  /* ---- semantic state. Never doubles as a character colour. ---- */
  --good: #2F7D5B;
  --warn: #9C6A06;
  --crit: #AF3A34;
  --good-wash: #E6F2EC;
  --warn-wash: #F8EFDC;
  --crit-wash: #F8E8E7;

  /* ---- character colours, assigned in this order and never cycled or reassigned.
         A ninth part folds into --c0; it does not get a generated hue. Validated for
         colour-vision deficiency in this adjacency order — if you change one, re-run
         the validator named in the halfcall-design skill. ---- */
  --c1: #2D5FA8;
  --c2: #A85A00;
  --c3: #B4407E;
  --c4: #4E7A14;
  --c5: #6A4FA8;
  --c6: #008E78;
  --c0: #6B6B76;

  /* ---- ink that sits ON the accent. Amber is light enough in dark mode that white
         text on it fails contrast, so the pairing is a token, not a guess. ---- */
  --on-accent: #FFFFFF;

  /* ---- depth. Working light gets real depth rather than a flat border: two layers,
         a tight contact shadow and a wide soft one, so a card sits ON the paper. ---- */
  --surface-lift: linear-gradient(180deg, #FFFFFF 0%, #F7F7FA 100%);
  --shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 12px 28px -20px rgba(20, 20, 30, .35);
  --shadow-lift: 0 1px 2px rgba(20, 20, 30, .06), 0 20px 44px -24px rgba(20, 20, 30, .42);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .85);

  /* ---- the lamp. In working light the bulb is on but the room is bright, so the amber
         only warms what it touches; nothing blooms and nothing washes. ---- */
  --glow: 0 2px 10px -3px rgba(168, 99, 10, .40);
  --glow-text: none;
  --bloom: 0px;
  --wash: none;
  --accent-lift: linear-gradient(90deg, #F9F0E0 0%, #FCF7EC 100%);

  --r: 11px;
  --r-sm: 8px;

  /* ---- type ---- */
  --font-display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes are in rem so that a company member who has raised their browser's default
     text size gets larger text everywhere — the spec assumes a sixty-year-old on an
     iPad. At the browser default of 16px these are exactly the artboards' pixel values,
     so nothing moves for everyone else. */
  --t-micro: .625rem;    /* 10   — eyebrows, table headers */
  --t-tag: .59375rem;    /* 9.5  — nav tags */
  --t-mono-sm: .65625rem;/* 10.5 — speaker names on sides */
  --t-xs: .6875rem;      /* 11   — meta lines */
  --t-sm: .71875rem;     /* 11.5 — chips, call-sheet mono */
  --t-sm-2: .75rem;      /* 12 */
  --t-base-sm: .78125rem;/* 12.5 — buttons, descriptions, tables */
  --t-base: .8125rem;    /* 13   — row titles */
  --t-base-lg: .84375rem;/* 13.5 — card headings, nav */
  --t-body: .875rem;     /* 14   — body copy */
  --t-lg: .90625rem;     /* 14.5 — production switcher title */
  --t-xl: 1.0625rem;     /* 17   — call sheet day number */
  --t-2xl: 1.125rem;     /* 18   — card display headings, plan name */
  --t-3xl: 1.375rem;     /* 22   — brand mark */
  --t-4xl: 1.6875rem;    /* 27   — ring figure */
  --t-5xl: 2.0625rem;    /* 33   — stat tile number */
  --t-6xl: 2.125rem;     /* 34   — page title */
  --t-7xl: 3.75rem;      /* 60   — the countdown: the one lit object on the page */

  /* The smallest a control may be before a thumb misses it. Principle 9. */
  --tap: 44px;
}

/* Working light, addressable explicitly — for a member who has chosen it on a dark
   device, and for a themed panel anywhere in the page. Colours are never declared *only*
   here; every one of them is on bare `:root` above. */
[data-theme="light"] {
  /* ---- surfaces and ink (cool neutrals — grey with a blue bias, never warm cream) ---- */
  --paper: #EAEAEF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F8;
  --surface-3: #EEEEF2;
  --ink: #17171E;
  --ink-2: #4B4B58;
  --ink-3: #666672;
  --rule: #DBDBE2;
  --rule-2: #E9E9EE;

  /* ---- accent: the stage amber, the working light. Used sparingly. ---- */
  --accent: #A8630A;
  --accent-2: #8A5108;
  --accent-wash: #F9F0E0;

  /* ---- semantic state. Never doubles as a character colour. ---- */
  --good: #2F7D5B;
  --warn: #9C6A06;
  --crit: #AF3A34;
  --good-wash: #E6F2EC;
  --warn-wash: #F8EFDC;
  --crit-wash: #F8E8E7;

  /* ---- character colours, in the fixed adjacency order ---- */
  --c1: #2D5FA8;
  --c2: #A85A00;
  --c3: #B4407E;
  --c4: #4E7A14;
  --c5: #6A4FA8;
  --c6: #008E78;
  --c0: #6B6B76;

  --on-accent: #FFFFFF;

  /* ---- depth ---- */
  --surface-lift: linear-gradient(180deg, #FFFFFF 0%, #F7F7FA 100%);
  --shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 12px 28px -20px rgba(20, 20, 30, .35);
  --shadow-lift: 0 1px 2px rgba(20, 20, 30, .06), 0 20px 44px -24px rgba(20, 20, 30, .42);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .85);

  /* ---- the lamp ---- */
  --glow: 0 2px 10px -3px rgba(168, 99, 10, .40);
  --glow-text: none;
  --bloom: 0px;
  --wash: none;
  --accent-lift: linear-gradient(90deg, #F9F0E0 0%, #FCF7EC 100%);

  --r: 11px;
  --r-sm: 8px;
  color-scheme: light;
}

/* Dark house. The ground is auditorium dark and the surfaces are only just above it;
   what separates them is the rule and the shadow, not a jump in lightness. The amber is
   the only lit thing in the room, so it is allowed to bloom — and only it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B0B0F;
    --surface: #14141B;
    --surface-2: #17171F;
    --surface-3: #22222C;
    --ink: #EDEDF2;
    --ink-2: #9A9AA6;
    --ink-3: #8B8B96;
    --rule: #24242E;
    --rule-2: #1E1E27;

    --accent: #F0A93B;
    --accent-2: #F6C170;
    --accent-wash: #241B0F;

    --good: #4FB489;
    --warn: #DBA23A;
    --crit: #E5756D;
    --good-wash: #10241C;
    --warn-wash: #241E10;
    --crit-wash: #281514;

    /* Unchanged from the validated set, and re-validated against this darker ground —
       see the halfcall-design skill for the run and its result. */
    --c1: #5B8AD6;
    --c2: #C67A18;
    --c3: #D4629B;
    --c4: #6E9E30;
    --c5: #8E70D0;
    --c6: #12A48E;
    --c0: #8B8B97;

    --on-accent: #14141B;

    --surface-lift: linear-gradient(180deg, #17171F 0%, #14141B 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -22px rgba(0, 0, 0, .85);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 24px 52px -26px rgba(0, 0, 0, .95);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .035);

    --glow: 0 0 0 1px rgba(240, 169, 59, .20), 0 0 20px -2px rgba(240, 169, 59, .45);
    --glow-text: 0 0 34px rgba(240, 169, 59, .45);
    --bloom: 8px;
    --wash: radial-gradient(ellipse 460px 340px at 88% -110px, rgba(240, 169, 59, .13), transparent 68%);
    --accent-lift: linear-gradient(90deg, rgba(240, 169, 59, .16) 0%, rgba(240, 169, 59, .02) 100%);
  }
}

[data-theme="dark"] {
  --paper: #0B0B0F;
  --surface: #14141B;
  --surface-2: #17171F;
  --surface-3: #22222C;
  --ink: #EDEDF2;
  --ink-2: #9A9AA6;
  --ink-3: #8B8B96;
  --rule: #24242E;
  --rule-2: #1E1E27;

  --accent: #F0A93B;
  --accent-2: #F6C170;
  --accent-wash: #241B0F;

  --good: #4FB489;
  --warn: #DBA23A;
  --crit: #E5756D;
  --good-wash: #10241C;
  --warn-wash: #241E10;
  --crit-wash: #281514;

  --c1: #5B8AD6;
  --c2: #C67A18;
  --c3: #D4629B;
  --c4: #6E9E30;
  --c5: #8E70D0;
  --c6: #12A48E;
  --c0: #8B8B97;

  --on-accent: #14141B;

  --surface-lift: linear-gradient(180deg, #17171F 0%, #14141B 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -22px rgba(0, 0, 0, .85);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 24px 52px -26px rgba(0, 0, 0, .95);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .035);

  --glow: 0 0 0 1px rgba(240, 169, 59, .20), 0 0 20px -2px rgba(240, 169, 59, .45);
  --glow-text: 0 0 34px rgba(240, 169, 59, .45);
  --bloom: 8px;
  --wash: radial-gradient(ellipse 460px 340px at 88% -110px, rgba(240, 169, 59, .13), transparent 68%);
  --accent-lift: linear-gradient(90deg, rgba(240, 169, 59, .16) 0%, rgba(240, 169, 59, .02) 100%);
}

/* Tells the browser which native widget palette to draw — scrollbars, form controls,
   the address bar on mobile. Same three-block shape as the colours above. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
[data-theme="dark"] { color-scheme: dark; }