/* ============================================================
   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.
   ============================================================ */

: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. */
  --bg: var(--holo-night);
  --panel: var(--holo-panel);
  --panel-solid: var(--holo-chrome);
  --border: var(--holo-line);
  --border-strong: var(--holo-line-hot);
  --text: 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;
}

[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. */
  --bg: var(--holo-canvas);
  --panel: var(--holo-panel);
  --panel-solid: var(--holo-white);
  --border: var(--holo-line);
  --border-strong: var(--holo-line-strong);
  --text: 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;
}