/* Served copy of design/identity/tokens.css. Edit the design copy and re-copy; never edit here. */
/* Parallax Studio identity tokens.
   Codified 25 Aug 2026 from the locked identity; source of truth design/identity/brand.md.
   Usage: set data-ground="paper" | "ink" | "cyanotype" on a surface and the role
   tokens resolve for that ground. Pure white never appears: paper is the only light. */

:root {
  /* The four colours */
  --ps-paper: #F7F4EC;
  --ps-ink: #0A111C;
  --ps-blue: #1B3F8F;  /* blueprint blue: the pen on paper, the cyanotype ground */
  --ps-cyan: #8FD8F2;  /* drafting cyan: the pen on ink; never on a light ground */

  /* Type, carried from Parallax Thinking */
  --ps-font-display: 'Space Grotesk', sans-serif;          /* weight 600 only */
  --ps-font-body: 'IBM Plex Sans', system-ui, sans-serif;  /* 400/500, never lighter at text sizes */
  --ps-font-mono: 'IBM Plex Mono', monospace;              /* labels, eyebrows, data */
}

[data-ground='paper'] {
  --ps-ground: var(--ps-paper);
  --ps-accent: var(--ps-blue);           /* fills and primary actions */
  --ps-on-accent: var(--ps-paper);
  --ps-text-display: #1B2A45;
  --ps-text-body: #232E42;
  --ps-text-muted: #445062;
  --ps-text-label: #4E6076;
  --ps-hairline: #D8D2C2;
  --ps-grid: rgba(27, 63, 143, 0.06);
  --ps-status-done: #1F7A4D;
  --ps-status-waiting: #8A5A00;
  --ps-status-wrong: #B0342C;
}

[data-ground='ink'] {
  --ps-ground: var(--ps-ink);
  --ps-accent: var(--ps-cyan);           /* lands once per view, on the main action */
  --ps-on-accent: var(--ps-ink);
  --ps-text-display: var(--ps-paper);
  --ps-text-body: #A8BCC6;
  --ps-text-muted: #A8BCC6;
  --ps-text-label: #7E99A8;
  --ps-hairline: #22323E;
  --ps-grid: rgba(143, 216, 242, 0.05);
  --ps-status-done: #57C48A;
  --ps-status-waiting: #E0A458;
  --ps-status-wrong: #FF8A80;
}

[data-ground='cyanotype'] {
  /* The statement surface: paper inverted. One moment per view; carries no status readings. */
  --ps-ground: var(--ps-blue);
  --ps-accent: var(--ps-paper);
  --ps-on-accent: var(--ps-blue);
  --ps-text-display: var(--ps-paper);
  --ps-text-body: rgba(247, 244, 236, 0.85);
  --ps-text-muted: rgba(247, 244, 236, 0.85);
  --ps-text-label: rgba(247, 244, 236, 0.78);
  --ps-hairline: rgba(247, 244, 236, 0.28);
  --ps-grid: rgba(247, 244, 236, 0.05);
  --ps-status-done: #57C48A;
  --ps-status-waiting: #E0A458;
  --ps-status-wrong: #FF8A80;
}

[data-ground] {
  background: var(--ps-ground);
  color: var(--ps-text-body);
  font-family: var(--ps-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Headings are display type, unless the heading is a label: a sheet head's eyebrow is an h1 carrying
   .eyebrow (or .ps-label), and without the exclusion this rule's specificity (0,2,0) outranks the label
   class and sets Space Grotesk in the display colour on it. Fixed 6 Sep 2026 after the Claude Design sync
   reproduced it from the live About page. */
[data-ground] :is(h1, h2, h3, .ps-display):not(.eyebrow, .ps-label) {
  font-family: var(--ps-font-display);
  font-weight: 600;
  color: var(--ps-text-display);
  text-wrap: balance;
}

[data-ground] p {
  text-wrap: pretty;
}

[data-ground] .ps-label {
  font-family: var(--ps-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-text-label);
}

/* Focus, per ground, each computed at 3:1+ against its own ground */
[data-ground='paper'] :focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; }
[data-ground='ink'] :focus-visible { outline: 2px solid var(--ps-cyan); outline-offset: 2px; }
[data-ground='cyanotype'] :focus-visible { outline: 2px solid var(--ps-paper); outline-offset: 2px; }