/* ============================================================================
   SKILLSPACE — design tokens

   Structure is XY Space's (~/python/_archive/xy-space/src/styles/theme.css):
   #f7f7f5 paper on a fainter #eeeef0 alt, white cards, TRUE BLACK type with no
   grey text, hairlines at rgba(0,0,0,.12), the #676767 ramp for dotted rules
   only, and rounded corners site-wide — no square corners anywhere.

   The accent is where the two brands part. XY Space is ultramarine #2d16c8 on
   a #1b0e71 ink ground. Skillspace is EVERGREEN, taken from the product's own
   `evergreen` colourway (desktop-app/src/renderer/src/styles.css) so the site
   and the app are the same object. Every value below was measured, not picked:

     role              XY Space            Skillspace       contrast
     fill / mark       #2d16c8 (10.19:1)   #08463a          10.78:1 on white
     dark surface      #1b0e71 (15.58:1)   #061a1a          17.94:1 on white
     mark on dark      #95a0ff  (6.49:1)   #00d286           9.02:1 on #061a1a

   All three beat their XY Space counterpart, and the dark surface and the
   on-dark mark ARE the app's evergreen `--bg` and `--accent`.

   THE RULE THAT KEEPS THIS HONEST: accent TEXT on paper is always ink. Green on
   paper is a MARK — a chip, a fill, a dot, a rule — never a voice. The moment
   body copy turns green the page starts reading like a template.
   ========================================================================= */

:root {
  /* ---- ground ---- */
  --ss-paper:        #f7f7f5;
  --ss-paper-alt:    #eeeef0;
  --ss-card:         #ffffff;
  --ss-ink:          #000000;

  /* ---- evergreen ---- */
  --ss-accent:       #08463a;  /* fills: buttons, chips, arrow tiles. Carries white. */
  --ss-accent-deep:  #06332b;  /* pressed/hover state of a fill */
  --ss-accent-mark:  #08463a;  /* the mark colour ON PAPER — same as the fill */
  --ss-dark:         #061a1a;  /* THE ink ground. One dark surface for the whole site. */
  --ss-dark-2:       #0b2424;  /* raised panel on the dark ground */
  --ss-dark-mark:    #00d286;  /* the mark ON DARK — deep green vanishes there */
  --ss-dark-mark-2:  #2ce39c;  /* secondary on-dark mark, for a second data series */
  --ss-on-dark:      #ffffff;
  --ss-on-dark-dim:  #c2d4cf;  /* the app's evergreen --ink-2 */

  /* ---- lines ---- */
  --ss-line:         #d9d9d8;  /* rgba(0,0,0,.12) flattened onto paper */
  --ss-line-dark:    #17403a;  /* the app's evergreen --line */
  --ss-line-dotted:  #676767;  /* dotted rules ONLY, always with an alpha modifier */

  /* ---- data colours (charts, grades) ----
     Separate from the accent on purpose. A grade is information, not brand. Each carries a grade chip's white
     letter at WCAG AA or better: A 10.78:1, B 6.05:1, C 4.97:1, D 5.02:1, F 7.76:1 (test/accessibility.test.mjs).
     C and D were #b8860b and #c2620f, the app's amber, at 3.25:1 and 4.16:1: the same hues, darker. */
  --ss-grade-a:      #08463a;
  --ss-grade-b:      #1d6f5a;
  --ss-grade-c:      #8f6a00;
  --ss-grade-d:      #b0560d;
  --ss-grade-f:      #a3181d;
  --ss-data-1:       #08463a;
  --ss-data-2:       #4a7c6f;
  --ss-data-3:       #8fa8a2;
  --ss-data-4:       #c9a227;  /* gold is a DATA colour only, never brand */

  /* ---- state, from layout.ts DeptState ---- */
  --ss-state-gap:     #a3181d;
  --ss-state-dormant: #8a8a86;
  --ss-state-thin:    #b8860b;
  --ss-state-strong:  #08463a;

  /* ---- type ---- */
  --ss-font: "Satoshi", "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ss-font-label: "Archivo Narrow", "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --ss-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 major third off 16px, capped so the hero stays a hero. */
  --ss-t-xs:   0.75rem;
  --ss-t-sm:   0.875rem;
  --ss-t-base: 1rem;
  --ss-t-md:   1.125rem;
  --ss-t-lg:   1.375rem;
  --ss-t-xl:   1.75rem;
  --ss-t-2xl:  2.25rem;
  --ss-t-3xl:  3rem;
  --ss-t-hero: clamp(2.5rem, 6vw, 4.5rem);

  /* ---- geometry ----
     Rounded site-wide. Cards/panels take the full 1rem; the smaller steps come
     off it so nothing is squared by accident. */
  --ss-r:    1rem;
  --ss-r-md: 0.625rem;
  --ss-r-sm: 0.375rem;
  --ss-r-pill: 999px;

  /* ---- rhythm ---- */
  --ss-gutter: clamp(1.25rem, 4vw, 3rem);
  --ss-measure: 68ch;
  --ss-max: 1240px;
  --ss-section: clamp(4rem, 9vw, 7.5rem);
  --ss-nav-h: 68px;

  /* ---- graph tokens, read by src/lib/skill-graph.js ---- */
  --ss-graph-ink: var(--ss-on-dark);
  --ss-graph-paper: var(--ss-dark);
  --ss-graph-accent: var(--ss-dark-mark);
  --ss-graph-accent-soft: var(--ss-dark-mark-2);
  --ss-graph-line: var(--ss-line-dark);
  --ss-graph-dim: var(--ss-on-dark-dim);

  color-scheme: light;
}

/* The site commits to one visual world: paper with a single evergreen ink
   ground. There is no dark mode, and that is a decision rather than an
   omission — every colour above is painted explicitly, so the page holds on
   whatever ground a host puts behind it. Sections opt into the dark ground by
   class (`.band--dark`), not by user preference. */