/* ============================================================
   TOKENS.CSS - the Hologram identity source of truth

   The approved identities are:
   - Dark Instrument: the default and explicit `dark` theme.
   - Light Precision: the explicit `light` theme.

   The --holo-* declarations below are copied value-for-value from
   docs/mockups/design-studio-{dark-instrument,light-precision}.html.
   Public entry pages link this sheet but retain a verified-equal
   inline fallback so each HTML file remains useful when copied on
   its own. test/token-single-source.test.mjs guards all mirrors.

   The shorter legacy names remain a compatibility surface for the
   SPA shell and workspaces while they migrate. New UI should prefer
   the --holo-* identity tokens directly.

   ---- APPEARANCE CONSUMPTION (r36-L06 `theme-editor`) ----------

   Four compatibility roles and four new --ui-* roles below now read
   an APPEARANCE token first and fall back to exactly the value they
   carried before:

       --bg: var(--holo-bg-surface, var(--holo-night));
                                    ^^^^^^^^^^^^^^^^^ was the whole
                                    declaration on 2026-09-05

   No identity VALUE is edited by that lane and no appearance token
   is DECLARED here — the appearance layer is additive and its
   values live in prefs, written onto :root at runtime by
   shared/ui/appearance/apply-appearance.js. With prefs.appearance
   empty nothing is written, every var() above resolves to its
   fallback, and this sheet renders exactly as it did before.
   test/appearance-tokens.test.mjs section E greps this file and
   fails if any of those fallbacks stops being the old literal;
   section E10 fails if this sheet ever starts declaring appearance
   tokens itself.
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Dark Instrument - approved mockup values. */
  --holo-night: #070b12;
  --holo-chrome: #0c121c;
  --holo-panel: #101925;
  --holo-raised: #162231;
  --holo-line: #26374a;
  --holo-line-hot: #3f5f78;
  --holo-text: #d9e7f1;
  --holo-muted: #8194a4;
  --holo-cyan: #62d7ff;
  --holo-cyan-soft: rgba(98, 215, 255, 0.14);
  --holo-violet: #8d82ff;
  --holo-green: #6de2af;
  --holo-warning: #ffba69;

  /* Dark page roles used by the public About surface. */
  --holo-faint: #596b79;
  --holo-danger: #ff8899;
  --holo-grid: #1b3c51;
  --holo-deep: #080d15;
  --holo-field: #0a111b;
  --holo-shadow: rgba(0, 0, 0, 0.32);

  /* Compatibility roles. Four of them read an appearance token
     first (r36-L06); the fallback is the declaration each one was. */
  --bg: var(--holo-bg-surface, var(--holo-night));
  --panel: var(--holo-bg-panel, var(--holo-panel));
  --panel-solid: var(--holo-chrome);
  --border: var(--holo-border-color, var(--holo-line));
  --border-strong: var(--holo-line-hot);
  --text: var(--holo-text-color, var(--holo-text));
  --text-dim: var(--holo-muted);
  --text-faint: var(--holo-faint);
  --text-strong: var(--holo-text);
  --accent: var(--holo-cyan);
  --accent-dim: var(--holo-cyan-soft);
  --accent-text: #031018;
  --pink: var(--holo-violet);
  --green: var(--holo-green);
  --yellow: var(--holo-warning);
  --red: var(--holo-danger);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Appearance METRIC roles (r36-L06). Declared once, here, because
     a font stack and a bar height are identity-independent — the
     [data-theme="light"] block below deliberately does not restate
     them. Each fallback is today's literal, quoted from the file
     that carries it:
       --ui-font       design-studio.html:14, js/hologram-app/shell.css:33
       --ui-font-size  design-studio.html:14, js/hologram-app/shell.css:34
       --ui-icon-size  js/hologram-app/shell.css:146
       --ui-bar-h      shared/ui/nav.js (height:32px), --nav-h
     The roles are published by the appearance lane; the bars that
     consume them belong to r36-L03 (markup), r36-L05 (chrome
     geometry) and r36-L09 (nav), which is why they are declared and
     not yet referenced. Nothing renders differently for it. */
  --ui-font: var(--holo-font-family, 'Inter','SF Pro',system-ui,sans-serif);
  --ui-font-size: var(--holo-font-size, 12px);
  --ui-icon-size: var(--holo-icon-size, 13px);
  --ui-bar-h: var(--holo-bar-h, 32px);
}

[data-theme="light"] {
  color-scheme: light;

  /* Light Precision - approved mockup values. */
  --holo-white: #ffffff;
  --holo-canvas: #f5f7fa;
  --holo-panel: #fbfcfd;
  --holo-ink: #20252b;
  --holo-muted: #6c7580;
  --holo-faint: #98a1aa;
  --holo-line: #d9dee5;
  --holo-line-strong: #c2cad3;
  --holo-blue: #2764d7;
  --holo-blue-soft: #e7efff;
  --holo-blue-dark: #184999;
  --holo-green: #26845a;
  --holo-orange: #bd671c;
  --holo-red: #be424d;
  --holo-grid: #dce3ea;

  /* Default-identity role aliases keep workspace mappings stable. */
  --holo-night: var(--holo-canvas);
  --holo-chrome: var(--holo-white);
  --holo-raised: var(--holo-white);
  --holo-line-hot: var(--holo-line-strong);
  --holo-text: var(--holo-ink);
  --holo-cyan: var(--holo-blue);
  --holo-cyan-soft: var(--holo-blue-soft);
  --holo-violet: var(--holo-blue-dark);
  --holo-warning: var(--holo-orange);
  --holo-danger: var(--holo-red);
  --holo-deep: var(--holo-white);
  --holo-field: var(--holo-white);
  --holo-shadow: rgba(23, 37, 51, 0.09);

  /* Compatibility roles. Same four appearance reads as the dark
     block (r36-L06), each falling back to ITS OWN light literal. */
  --bg: var(--holo-bg-surface, var(--holo-canvas));
  --panel: var(--holo-bg-panel, var(--holo-panel));
  --panel-solid: var(--holo-white);
  --border: var(--holo-border-color, var(--holo-line));
  --border-strong: var(--holo-line-strong);
  --text: var(--holo-text-color, var(--holo-ink));
  --text-dim: var(--holo-muted);
  --text-faint: var(--holo-faint);
  --text-strong: var(--holo-ink);
  --accent: var(--holo-blue);
  --accent-dim: var(--holo-blue-soft);
  --accent-text: #ffffff;
  --pink: var(--holo-red);
  --green: var(--holo-green);
  --yellow: var(--holo-orange);
  --red: var(--holo-red);
  --shadow-sm: 0 1px 2px rgba(23, 37, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(23, 37, 51, 0.08);
  --shadow-lg: 0 10px 30px rgba(23, 37, 51, 0.12);
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}