/* ============================================================================
   code-theme.css — the colour scheme for .uto code blocks.

   Split out of site.css so it has a name you can search for. Everything that
   colours code is in this file and nowhere else.

   The file is in three parts, and the split is the point:

     1. two palettes, each a flat list of the same 17 --uc-* variables
     2. the block's own layout, which reads those variables and no colours
     3. token → colour, which also reads those variables and no colours

   So replacing a scheme means rewriting one list of 17 values. Nothing in
   parts 2 or 3 knows which palette is active, and neither palette knows
   anything about the site's own tokens.

   The .syn-* class names are emitted server-side by lib/uto/highlight.js, from
   UTO_TOKEN_COLORS in lib/uto/syntax-model.js. Renaming one here breaks
   highlighting silently — the markup simply stops matching. Add colours by
   adding variables, not by renaming classes.

   DARK is a clone of utomata-desktop/src/themes/editor-themes.css theme "one".
   It is a contract: code on the site should look like code in the editor, so
   change it only by re-cloning.

   LIGHT has no counterpart in the app yet. It was made here, for the site's
   light mode, by holding each token's hue and moving lightness across — the
   same families doing the same jobs, darkened to sit on paper instead of
   glowing on black. If the editor ever grows a light theme, this is the block
   to throw away and replace with the clone.
   ========================================================================= */

/* ── 1a. palette — light ─────────────────────────────────────────────────── */
/* Structural greys invert their roles: grey0 is the surface at both ends of
   the range, grey4 the body text, grey5 the strongest mark. */

.code {
  --uc-grey0: #fbfbf9;
  --uc-grey2: #8c8c86;
  --uc-grey3: #6e6e68;
  --uc-grey4: #2f2f33;
  --uc-grey5: #111114;

  --uc-red1: #c4453c;
  --uc-orange1: #b3610a;
  --uc-yellow0: #a06a2c;
  --uc-yellow1: #97701f;
  --uc-green0: #4a7a4d;
  --uc-green1: #45903b;
  --uc-cyan1: #2a8377;
  --uc-blue1: #2f7ea3;
  --uc-purple1: #96479a;

  --uc-accentRed: #c0392b;
  --uc-accentGreen: #3d8f47;
  --uc-accentBlue: #2b7fc4;
}

/* ── 1b. palette — dark ──────────────────────────────────────────────────── */
/* Cloned from the editor. Same three-state selection the site's own tokens
   use: no attribute follows the system, an explicit data-theme overrides it. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code {
    --uc-grey0: #1f1f1f;
    --uc-grey2: #6c6c6c;
    --uc-grey3: #aaaaaa;
    --uc-grey4: #bcb9b9;
    --uc-grey5: #f1f1f1;

    --uc-red1: #d65d5b;
    --uc-orange1: #d8650d;
    --uc-yellow0: #cf8d4d;
    --uc-yellow1: #e5c07b;
    --uc-green0: #5c945f;
    --uc-green1: #66c256;
    --uc-cyan1: #73c6b6;
    --uc-blue1: #519aba;
    --uc-purple1: #c669bc;

    --uc-accentRed: #d94130;
    --uc-accentGreen: #50bd5d;
    --uc-accentBlue: #36a4f3;
  }
}

:root[data-theme="dark"] .code {
  --uc-grey0: #1f1f1f;
  --uc-grey2: #6c6c6c;
  --uc-grey3: #aaaaaa;
  --uc-grey4: #bcb9b9;
  --uc-grey5: #f1f1f1;

  --uc-red1: #d65d5b;
  --uc-orange1: #d8650d;
  --uc-yellow0: #cf8d4d;
  --uc-yellow1: #e5c07b;
  --uc-green0: #5c945f;
  --uc-green1: #66c256;
  --uc-cyan1: #73c6b6;
  --uc-blue1: #519aba;
  --uc-purple1: #c669bc;

  --uc-accentRed: #d94130;
  --uc-accentGreen: #50bd5d;
  --uc-accentBlue: #36a4f3;
}

/* ── 2. the block ────────────────────────────────────────────────────────── */
/* No colour literals here — only the variables above. The panel sits slightly
   off the page surface in both themes: lighter than the page on dark, lighter
   again on light, so it reads as lifted rather than as a hole. */

.code {
  overflow-x: auto;
  padding: var(--gap-3);
  background: var(--uc-grey0);
  color: var(--uc-grey4);
  font-size: 0.929rem;
  line-height: 1.55;
  tab-size: 2;
  border-radius: 4px;

  /* The body face is sans; without naming the mono stack here, `.code code`
     below would inherit it and every .uto block would render in body text. */
  font-family: var(--font-mono);
}

/* The light panel needs an edge — on paper a near-white block on off-white has
   no shape of its own. On dark the tonal step is enough, so it is turned off. */
.code { border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code { border-color: transparent; } }
:root[data-theme="dark"] .code { border-color: transparent; }

.code code { font-family: inherit; }

/* ── 3. token → colour ───────────────────────────────────────────────────── */
/* Same class names the editor theme uses. */

.syn-field { color: var(--uc-red1); }
.syn-formation { color: var(--uc-green1); }
.syn-viewport { color: var(--uc-blue1); }
.syn-uniform { color: var(--uc-purple1); }
.syn-macro { color: var(--uc-yellow0); }
.syn-trigger { color: var(--uc-orange1); }
.syn-stream { color: var(--uc-cyan1); }
.syn-number { color: var(--uc-purple1); }
.syn-operator { color: var(--uc-green0); }
.syn-constant { color: var(--uc-yellow1); }
.syn-grammar { color: var(--uc-red1); }
.syn-builtin { color: var(--uc-cyan1); }
.syn-enum { color: var(--uc-yellow0); }
.syn-variable { color: var(--uc-grey4); }
.syn-property { color: var(--uc-grey3); }
.syn-property-field { color: var(--uc-grey3); }
.syn-property-formation { color: var(--uc-grey3); }
.syn-property-viewport { color: var(--uc-grey3); }
.syn-brace { color: var(--uc-grey3); }
.syn-bracket { color: var(--uc-grey3); }
.syn-paren { color: var(--uc-grey3); }
.syn-dot { color: var(--uc-grey3); }
.syn-punct { color: var(--uc-grey3); }

.syn-comment {
  color: var(--uc-grey2);
  font-style: italic;
}

.syn-swizzle-dot { color: var(--uc-grey5); }
.syn-swizzle-0 { color: var(--uc-accentRed); }
.syn-swizzle-1 { color: var(--uc-accentGreen); }
.syn-swizzle-2 { color: var(--uc-accentBlue); }
.syn-swizzle-3 { color: var(--uc-grey4); }