/*
 * Canonical ScreenRig brand tokens for web surfaces.
 *
 * Source of truth: brand/style-guide.md. Machine-readable twin: brand/tokens.json.
 * Marketing owns this file. Vendor it; do not transcribe the hexes by hand, and
 * do not edit it in a consumer repo — a hand-copied value drifts and nothing
 * detects the drift.
 *
 * Version: screenrig.brand/v1 — also exposed as --brand-version below, so a
 * consumer can detect a major change by inspection instead of by diff. Byte
 * pinning lives in brand/tokens.manifest.json; brand/check-tokens.py enforces
 * that this file agrees with tokens.json and that both match the manifest.
 *
 * The values are the screenRIG palette. The method — token-only colour, lines
 * derived from the foreground rather than picked as greys, monospace throughout,
 * colour that names a state instead of decorating a surface — comes from the
 * Homeplane panel system.
 *
 * Two rules are measured, not stylistic, and both are easy to break because the
 * failure looks fine on a designer's monitor:
 *
 *   --blue is a FILL, never ink.   2.48:1 on ground, 1.78:1 on surface. It cannot
 *                                  carry text, a link, a border, or an icon
 *                                  stroke. White on blue is 4.98:1 and is the only
 *                                  place it touches type.
 *   --fg-muted is GROUND-only.     3.49:1 on surface. Card secondary lifts to --fg.
 */

:root {
  /* The version marker. A string custom property is readable at runtime via
     getComputedStyle, so a consumer can assert the contract it was built against
     rather than trusting that someone re-vendored. Bump on a major change. */
  --brand-version: "screenrig.brand/v1";

  /* ------------------------------------------------------------------ ground --
     Roughly 92% of any real frame is ground plus foreground text. Budget colour
     against that, not against a swatch board. */
   --ground: #2a3547;
  --surface: #3d4b5f;
  --well: #202a38; /* recessed: code, terminal, inputs */

  /* --------------------------------------------------------------------- ink --
     --fg was chosen to clear AA on BOTH ground and surface. --fg-muted is
     ground-only. */
  --fg: #d3d8e0; /* body. 8.64:1 ground / 6.19:1 surface */
  --fg-bright: #ffffff; /* headlines, RIG, loudest thing in a block */
  --fg-muted: #9ca3af; /* secondary. 4.87:1 ground / 3.49:1 surface — GROUND ONLY */

  /* ------------------------------------------------------------------- brand --
     Amber is the accent, and it is the strongest one that still passes on the
     ground — spend it on the single thing that matters. */
  --amber: #f8b334; /* 6.76:1 ground / 4.85:1 surface */
  --blue: #3f70b7; /* FILL ONLY. See the header. */

  /* ------------------------------------------------------------------- level --
     Status colour, not a second accent set. Base hues are ground-only: the
     lighter card surface puts ember and steel under the 3:1 UI-component floor,
     so cards take the lifted variants. Decision record in
     brand/toast-level-colours.md. */
  --error: #e6664d;
  --alert: #df7f2a; /* copper, deliberately not brand amber */
  --info: #6b9bbc; /* close relative of --blue; --info carries a word, --blue fills a control */

  --error-on-surface: #ea7d68;
  --alert-on-surface: #e4924a;
  --info-on-surface: #81aac6;

  /* Not a brand accent. Only for a genuine success state. */
  --success: #3fae6a;

  /* ------------------------------------------------------------------- lines --
     Every line is the foreground at low alpha over the ground — never a grey.
     A picked grey drifts the moment the ground changes; a derived line cannot.
     The three weights differ on purpose. Collapsing them into one is the most
     common way a derived system starts looking flat. */
  --hair: color-mix(in srgb, var(--fg) 14%, transparent); /* meant to be seen */
  --rule: color-mix(in srgb, var(--fg) 10%, transparent); /* meant to be felt */
  --track: color-mix(in srgb, var(--fg) 12%, transparent); /* unfilled half of a reading */

  /* Selection is a lift in brightness, not a colour, so it never competes with a
     semantic colour sitting in the same row. */
  --fill: color-mix(in srgb, var(--fg) 18%, var(--ground));

  /* -------------------------------------------------------------------- type --
     Monospace throughout is a register, not a constraint: ScreenRig is
     infrastructure and should read like a tool. It also means code, commands,
     paths, and identifiers need no separate treatment to look native. */
  --mono: "Agave Nerd Font", ui-monospace, monospace;
  --size-page-heading: 20px;
  --size-section-heading: 15px;
  --size-body: 13px;
  --size-caption: 11px;
  --line-height: 1.45;

  /* ------------------------------------------------------------------ shapes --
     Enough radius to read as intentional, not enough to look soft. Surfaces are
     operational: no shadows, no gradients on brand surfaces, no glass. */
  --radius-control: 2px;
  --radius-card: 4px;

  --gap-tight: 0.15rem;
  --gap-list: 0.35rem;
  --gap-section: 0.6rem;
  --gap-major: 1rem;
}

/*
 * Far surfaces: a 1080p panel read across a room, driven by a D-pad, with no
 * touch and no hover. Same palette, different scale — apply by adding
 * `data-surface="far"` to the root.
 *
 * Type roughly doubles and 20px is an absolute floor: there is no such thing as
 * secondary information the viewer is permitted to fail to read. Lines get
 * stronger and fewer, because 14% measures 1.42:1 against the ground and simply
 * disappears at distance. Prefer separation by space and surface change over
 * separation by rule.
 */
:root[data-surface="far"] {
  --size-page-heading: 40px;
  --size-section-heading: 30px;
  --size-body: 26px;
  --size-caption: 20px;

  --hair: color-mix(in srgb, var(--fg) 35%, transparent);
  --rule: color-mix(in srgb, var(--fg) 25%, transparent);
  --track: color-mix(in srgb, var(--fg) 30%, transparent);

  /* Overscan and bezel cropping are still real on signage hardware. Content at
     the edge is content you have not shipped. */
  --safe-x: 96px;
  --safe-y: 54px;
}

/*
 * Focus is always visible, and on a far surface it is the cursor rather than an
 * accent — it is the only thing telling the viewer where they are. Pair it with
 * a non-colour cue; never let focused and unfocused differ only by hue.
 */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

:root[data-surface="far"] :focus-visible {
  outline-width: 4px;
  outline-offset: 4px;
}