/* The brand layer. This file answers "what is the brand"; styles.css answers
   "how do components use it". Values were measured off measurable.ai and
   blog.measurable.ai — see docs/superpowers/specs/2026-07-30-measurable-rebrand-design.md.

   The token NAMES here are the ones styles.css already consumed before the
   rebrand. That is deliberate: it keeps the component diff small.

   Two invariants a reader must not break:

   1. Mint (#68ff92) is ~1.4:1 on white. It is never text and never an outline
      on a light surface — only a fill behind dark text, or a 2px indicator
      that is paired with a text-colour change. This is why --accent differs
      between the light and dark scopes rather than being "the brand colour".

   2. --accent must stay a PLAIN COLOUR meeting 4.5:1 against --ground in both
      scopes. `#notfound-mount a:not([class])` in styles.css uses it as the
      link colour on the served 404's static fallback, which renders only
      when JS has failed. It is also used as outline/border-color/color in
      six other places, so a gradient here breaks rendering. The gradient
      lives in --cta-gradient.

   tests/portal-contrast.test.ts enforces both mechanically. */

/* @scope light */
:root {
  --ground: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #f1f0f7;
  --surface-hover: #eae8f3;
  --border: #e6e3f0;
  --border-strong: #d0cbe2;
  --text: #221852;
  --text-muted: #5f5a7a;
  --text-faint: #686385;
  --primary: #221852;
  --primary-hover: #352761;
  --primary-text: #ffffff;
  --accent: #503d91;
  --accent-soft: rgba(80, 61, 145, 0.12);
  --danger: #c4243f;
  --shadow-sm: 0 1px 2px rgba(34, 24, 82, 0.06);
  --shadow-md: 0 6px 22px rgba(34, 24, 82, 0.1);
  --shadow-lg: 0 18px 50px rgba(34, 24, 82, 0.18);

  /* visibility badge tints — internal reads indigo, public mint, private amber.
     Amber is the one non-brand hue, kept because private is a warning-ish
     state that must not be confusable with internal or public. */
  --vis-private-bg: #f8ecd4;
  --vis-private-fg: #7a5514;
  --vis-internal-bg: #e8e4f6;
  --vis-internal-fg: #3d2e75;
  --vis-public-bg: #d6ffe2;
  --vis-public-fg: #14663a;

  /* Team tones: one hue per team, used everywhere that team appears. The rail
     dot carries the hue raw; the pill is a tint pair of the same hue. The
     washes carry real chroma on purpose: the tile swatches below are so
     desaturated that a pill borrowing them read near-grey at rest, and the hue
     only showed up on the active ring.

     A SEPARATE palette from the tile swatches, deliberately: those still colour
     the artifact tile, the list thumbnail and the owner avatar, which hash on
     title and email rather than on a team, so recolouring a team must never
     move somebody's avatar. format.js's teamTone() picks one.

     MailTime is pinned to the brand blue #5d9bec, which is a mid-tone and so
     cannot be a text fill itself; the pair below is derived from it. */
  --team-0-dot: #5b4bc4;
  --team-0-bg: #ddd7f7;
  --team-0-fg: #34247a;
  --team-1-dot: #17a05a;
  --team-1-bg: #c9f2d9;
  --team-1-fg: #0d5c33;
  --team-2-dot: #0d9c8c;
  --team-2-bg: #c4f1ea;
  --team-2-fg: #08574e;
  --team-3-dot: #8b45d6;
  --team-3-bg: #ebd9fb;
  --team-3-fg: #56258c;
  --team-4-dot: #3d6fd4;
  --team-4-bg: #d5e2fb;
  --team-4-fg: #1d3d80;
  --team-5-dot: #d13a5c;
  --team-5-bg: #fbd7e0;
  --team-5-fg: #8a1533;
  --team-brand-blue-dot: #5d9bec;
  --team-brand-blue-bg: #d8e8fd;
  --team-brand-blue-fg: #17497f;

  /* artifact tile swatches; format.js's 0..5 hash picks one */
  --tile-0-bg: #e8e4f6;
  --tile-0-fg: #3d2e75;
  --tile-1-bg: #d6ffe2;
  --tile-1-fg: #14663a;
  --tile-2-bg: #d8fbf4;
  --tile-2-fg: #0b5f55;
  --tile-3-bg: #ede2fb;
  --tile-3-fg: #5b2e8f;
  --tile-4-bg: #e2e8fa;
  --tile-4-fg: #26417f;
  --tile-5-bg: #fbe3e8;
  --tile-5-fg: #8a1f33;

  /* brand constants — identical in every scope */
  /* --brand-mint (mint-600, #55ff8d) is the LOGO's mint only — it is one shade
     deeper than mint-500 (#68ff92), the "Mint" this file's header comment
     means and the colour used above as --primary/--accent in the dark and
     entry scopes. The two are deliberately different greens: changing this
     token moves the wordmark's mint dot, not the UI accent. */
  --brand-mint: #55ff8d;
  --cta-gradient: linear-gradient(45deg, #a665ff, #68ff92);
  --entry-ground: linear-gradient(90deg, #06082c, #211852);

  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --radius-notch: 9px 9px 9px 0;
}

/* @scope dark */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a1a;
    --surface: #14122b;
    --surface-2: #1c1938;
    --surface-hover: #242046;
    --border: #292547;
    --border-strong: #3a3560;
    --text: #edebf7;
    --text-muted: #a29dbe;
    --text-faint: #908bb0;
    /* mint fill, navy ink — the marketing site's floating CTA. Mint is a
       text/fill colour on dark, where it clears 15:1. */
    --primary: #68ff92;
    --primary-hover: #8cffab;
    --primary-text: #06082c;
    --accent: #68ff92;
    --accent-soft: rgba(104, 255, 146, 0.16);
    --danger: #ff6b80;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);

    --vis-private-bg: #2e2515;
    --vis-private-fg: #e0bd7a;
    --vis-internal-bg: #221c3d;
    --vis-internal-fg: #b5a9e6;
    --vis-public-bg: #14301f;
    --vis-public-fg: #86e8a6;

    /* The dots keep their light-scope value: a saturated mid-tone dot reads on
       both grounds, and a team's hue must be recognisably the same colour in
       either theme. Only the pill's tint pair flips. */
    --team-0-bg: #241d4d;
    --team-0-fg: #b9abf5;
    --team-1-bg: #103322;
    --team-1-fg: #74e0a0;
    --team-2-bg: #0c2f2b;
    --team-2-fg: #63ddcc;
    --team-3-bg: #2a1a44;
    --team-3-fg: #cf9bf5;
    --team-4-bg: #16243f;
    --team-4-fg: #9cbcf0;
    --team-5-bg: #331621;
    --team-5-fg: #f2a0b4;
    --team-brand-blue-bg: #142640;
    --team-brand-blue-fg: #9dc6f8;

    --tile-0-bg: #221c3d;
    --tile-0-fg: #b5a9e6;
    --tile-1-bg: #14301f;
    --tile-1-fg: #86e8a6;
    --tile-2-bg: #0f2e2a;
    --tile-2-fg: #6fe0d0;
    --tile-3-bg: #251a3a;
    --tile-3-fg: #c39bf0;
    --tile-4-bg: #182241;
    --tile-4-fg: #9db2e8;
    --tile-5-bg: #2e1720;
    --tile-5-fg: #f09aac;
  }
}

/* @scope entry */
/* The always-dark entry surfaces: sign-in, device approval, connect. Applied
   as a CLASS, not a media query, so these pages stay dark under a light OS
   theme — they are the brand's front door.

   This wins over the dark block above by INHERITANCE, not specificity: a
   custom property declared on a nearer ancestor governs its whole subtree
   regardless of selector weight, no !important needed — PROVIDED .surface-dark
   sits on a descendant of <html> (its only real use, e.g. <body>). If it were
   ever applied to <html> itself there is no nearer-ancestor relationship:
   .surface-dark and the dark block's :root both match at specificity (0,1,0),
   and .surface-dark would win only by sitting below the dark block in source
   order — a source-order dependency, not the ordering-free inheritance this
   scope otherwise relies on.

   --ground is deliberately transparent, not a solid colour: these surfaces are
   painted by `body.entry-ground`'s `background: var(--entry-ground)` (see
   portal/styles.css) sitting behind them, not by --ground. Apply .surface-dark
   without entry-ground on the same element and --text: #ffffff below renders
   on whatever the ancestor chain's background resolves to — typically
   UA-default white under a light OS theme, i.e. invisible white-on-white text.
   .surface-dark and body.entry-ground are one contract: always apply both
   together, never one without the other.

   The second selector below is the inverse half of that contract, and it is
   why this block is a selector LIST rather than a lone class. The consent
   banner is `position: fixed` and appended to <body> (portal/src/consentBanner.js
   explains why it cannot live inside a view section), so on the sign-in splash
   it is #signed-out's SIBLING, not its descendant — it sits on the entry
   ground with no .surface-dark ancestor to inherit this scope from, and falls
   back to the OS-following :root tokens. That rendered a white card on the
   navy gradient under a light OS theme: entry-ground without the dark scope,
   exactly the pairing the paragraph above forbids, just the other way round.
   Naming it here rather than re-stating these values in styles.css keeps ONE
   declaration of the entry palette; the banner's own look stays a component
   concern in styles.css, and only the token scope is granted here. Keyed off
   `body.entry-ground` rather than a class the banner carries, so it follows
   the ground automatically: sign in while the banner is still up and the
   class comes off <body>, the selector stops matching, and the banner
   re-inherits :root for the light gallery with no JS involved. */
.surface-dark,
body.entry-ground .consent {
  --ground: transparent;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.5);
  --primary: #68ff92;
  --primary-hover: #8cffab;
  --primary-text: #06082c;
  --accent: #68ff92;
  --accent-soft: rgba(104, 255, 146, 0.16);
  --danger: #ff6b80;
  /* Redeclared, not inherited from the dark scope above: without this, these
     always-dark surfaces render the light scope's rgba(34, 24, 82, 0.1) under
     a light OS theme and the dark scope's rgba(0, 0, 0, ...) under a dark
     one — the same navy ground shadowing differently depending on the
     viewer's OS instead of staying fixed like every other entry-scope token. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
}