/* ─────────────────────────────────────────────────────────────────────────
   TIER 2 — SEMANTIC
   What a colour MEANS. Defined only in terms of tier 1.
   This is the ONLY tier an app theme may override — see tokens/apps.css and
   specs/design-system.md §4.
   ───────────────────────────────────────────────────────────────────────── */

@layer tokens {
  :root {
    /* ── Accent ────────────────────────────────────────────────────────
       An app overrides --color-accent and --color-accent-text as a PAIR; a
       dark accent needs light text and vice versa. Everything else here is
       derived with color-mix(in oklab, …), which is what makes re-accenting
       a whole app a one-line change. oklab, never sRGB — sRGB mixing
       produces muddy midpoints. */
    --color-accent:      var(--olive-600);
    --color-accent-text: var(--white);

    /* Decorative — washes, illustrations, non-load-bearing flourishes.
       Themeable within an app's own content area only. */
    --color-decor: var(--olive-300);

    /* Display face — the platform's is the UI face. Declared on :root and NOT
       on `*`: an app overrides this token directly, on its own content area,
       and a `*` declaration would re-assert the default on every descendant of
       that area and beat the inherited override. That is the opposite of the
       accent-derived tokens, which must be on `*` precisely because they are
       recomputed per element rather than inherited. A derivation goes on `*`;
       a themeable token's own default goes on :root. */
    /* Newsreader. The platform's brand IS The Gathering, and that brand sets
       block titles in its serif — so the default display face is the serif,
       not a second name for the UI face. An app overrides this with its own
       display face inside its own content area (Coherence does).

       This is the token page titles consume. It is NOT for 14px card titles or
       labels: the brand uses the serif for block titles only, everything else
       is Red Hat. A rule reaching for this token should be setting a title. */
    --font-display: var(--font-serif);

    /* Decorative backdrop. Defaults to none and is opted into per PAGE,
       never app-wide — otherwise every dense table view inherits flavour it
       does not want. Never place art directly behind body text; content
       keeps its --color-surface layer. specs/design-system.md §4.6. */
    --app-backdrop: none;

    /* ── Text and surfaces ─────────────────────────────────────────────── */
    --color-text:        var(--green-900);
    /* Full black, for section headings that have to read as structure rather
       than as body copy. Deliberately blacker than --color-text, which is a
       warm near-black chosen for long-form reading. */
    --color-text-strong: var(--black);
    --color-text-muted:  var(--stone-500);
    --color-text-faint:  var(--stone-300);
    --color-text-invert: var(--white);

    --color-bg:           var(--stone-50);
    --color-surface:      var(--white);
    --color-surface-2:    var(--stone-100);
    --color-border:       var(--stone-200);
    --color-border-light: var(--stone-150);

    /* ── Status ────────────────────────────────────────────────────────
       Never themeable: an app must not be able to make its errors invisible. */
    --color-danger:        var(--red-600);
    --color-danger-strong: var(--red-800);
    --color-danger-bg:     var(--red-50);
    --color-danger-border: var(--red-100);

    --color-success:        var(--moss-700);
    --color-success-bg:     var(--moss-50);
    --color-success-border: var(--moss-100);

    --color-warning:    var(--amber-900);
    --color-warning-bg: var(--amber-50);

    /* ── Motion ───────────────────────────────────────────────────────── */
    --transition-fast: var(--dur-fast) var(--ease-out);
    --transition-base: var(--dur-base) var(--ease-out);
  }

/* ── Theme-derived tokens — declared on every element, deliberately ────
   A custom property substitutes its var()s at computed-value time on the
   element that DECLARES it. A token declared on :root as
   `--btn-bg: var(--color-accent)` therefore resolves against <html>'s accent
   and inherits downward as a literal colour — overriding --color-accent on
   <body data-app="…"> can never reach it.

   So every token that transitively depends on a themeable tier-2 token is
   declared here, on `*`, where it re-resolves against each element's own
   inherited accent. Tokens that depend on nothing themeable stay on :root,
   which is one declaration instead of one per element.

   Adding a token that references a themeable token? It belongs in this
   block. web/app/tests_design_tokens.py enforces that.
   ──────────────────────────────────────────────────────────────────────── */
  *,
  ::before,
  ::after {
    --color-accent-ring:  color-mix(in oklab, var(--color-accent) 15%, transparent);
    /* The accent darkened until it holds up as a 3px line on a light surface.
       70% is set by the lightest accent in the system: the wash above is ~1.1:1
       against white, this lands the palest app accent near 4:1 and everything
       else well past it, so --focus-ring clears the 3:1 non-text contrast bar
       (WCAG 1.4.11) in every theme without being hand-picked per app. Distinct
       from --color-accent-hover, which is a surface fill and free to move for
       reasons that have nothing to do with a focus outline. */
    --color-accent-ring-solid: color-mix(in oklab, var(--color-accent) 70%, var(--black));
    --color-accent-hover: color-mix(in oklab, var(--color-accent) 82%, var(--black));
    --color-accent-soft:  color-mix(in oklab, var(--color-accent) 12%, var(--white));
    --color-accent-quiet: color-mix(in oklab, var(--color-accent) 6%, var(--white));

  }
}