/* ==========================================================================
   SazAI skin  —  the ui. showcase's default look (data-skin="sazai")
   --------------------------------------------------------------------------
   Remaps the Quartz chrome palette (~12 custom properties consumed across the
   built site CSS) onto the SazAI design tokens (tokens.css). The SazAI tokens
   flip light/dark through the saved-theme -> data-theme bridge, so this single
   block covers BOTH themes — no per-theme duplication here.

   Active ONLY under html[data-skin="sazai"]. Inert otherwise (always safe to
   link). Must be linked AFTER tokens.css so it reads the token values.

   Anti-cycle note: `--highlight` is the one name shared with a SazAI token, so
   it is set from a tint (never `var(--highlight)`) to avoid self-reference.
   Every other Quartz palette name is distinct from the SazAI token names.
   ========================================================================== */

/* Fonts are self-hosted — the host links fonts/fonts.css (DM Sans · DM Mono · Noto Sans Arabic).
   The remote Google-Fonts @import was removed in 0.11.0 for CSP-safety / privacy / on-prem parity. */

:root[data-skin="sazai"] {
  /* surfaces + ink */
  --light: var(--bg);
  --lightgray: var(--border);
  --gray: var(--text-muted);   /* was text-faint — measured 4.11:1 on dark (search placeholder,
                                  Lighthouse 2026-07-30, < AA 4.5). Muted clears both themes
                                  (7.7 dark · 4.6 light); every --gray text gains legibility. */
  --darkgray: var(--text);
  --dark: var(--text);

  /* accents — links/active use the analysis blue; graph/hover a second brand hue */
  --secondary: var(--info);
  --tertiary: var(--hue-reprocess);
  --accent: var(--secondary); --accent-2: var(--textHighlight);   /* component accents follow this skin */

  /* graph palette (seam: the graph plugin reads these; each falls back to the
     chrome var, so it is inert until the seam lands). Theme-aware guides — legible
     on light AND dark backgrounds (the global-graph modal is dark either way). */
  --graph-current: var(--info);         /* blue   — the page you are on */
  --graph-visited: var(--hue-output);   /* green  — already explored */
  --graph-unvisited: var(--text-muted); /* gray   — not yet visited */
  --graph-tag: var(--hue-upload);       /* orange — the group (tag) ring */

  /* highlights — set from tints (NOT var(--highlight): would self-reference) */
  --highlight: color-mix(in srgb, var(--info) 12%, transparent);
  --textHighlight: color-mix(in srgb, var(--warning) 40%, transparent);

  /* type — the SazAI brand faces */
  --titleFont: var(--font-sans);
  --headerFont: var(--font-sans);
  --bodyFont: var(--font-sans);
  --codeFont: var(--font-mono);
}

/* A11y (Lighthouse 2026-07-29): on the LIGHT theme the analysis blue over the .internal
   highlight pill measures 3.87:1 (< 4.5 WCAG AA small text). One shade deeper for link
   duty on light only — 5.0:1 on the pill, 6.0:1 on white; dark theme unchanged (the
   lifted hues already clear). Skin-owned constant (like the SKIN_DOTS brand values). */
:root[data-skin="sazai"][data-theme="light"] {
  --secondary: #3355e0;
}