/* Palette tokens.
   Three layers share every screen: ink belongs to the person, lapis and the neutrals to the interface,
   pigment to the model. Pigment moves in hue only; its lightness and chroma are locked per theme. */
@property --fh { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  color-scheme: light;
  /* Hues */
  --h-lapis: 262; --h-viridian: 168; --h-ochre: 78; --h-madder: 24; --h-tyrian: 322;
  /* Pigment lightness and chroma, locked per theme so contrast never moves while colour flows */
  --ink-l: .50; --ink-c: .17;

  /* Interface: ground and surfaces (warm paper) */
  --ground: oklch(.983 .004 85);
  --surface: oklch(.997 .002 85);
  --surface-2: oklch(.963 .005 85);
  --surface-3: oklch(.936 .007 85);
  --line: oklch(.895 .008 85);
  --line-2: oklch(.83 .01 85);
  --lapis: oklch(var(--ink-l) var(--ink-c) var(--h-lapis));

  /* Person: ink */
  --ink: oklch(.205 .018 265);
  --ink-2: oklch(.47 .016 265);
  --ink-3: oklch(.54 .012 265);

  /* States: done, needs you, error. Never decoration. */
  --viridian: oklch(.52 .12 var(--h-viridian));
  --ochre: oklch(.55 .13 var(--h-ochre));
  --madder: oklch(.55 .19 var(--h-madder));

  /* Model: solid tyrian where a gradient can't be drawn, pigment everywhere else */
  --tyrian: oklch(.52 .18 var(--h-tyrian));
  --pigment: linear-gradient(100deg, oklch(var(--ink-l) var(--ink-c) var(--h-lapis)), oklch(var(--ink-l) var(--ink-c) var(--h-tyrian)) 38%, oklch(var(--ink-l) var(--ink-c) var(--h-madder)) 68%, oklch(var(--ink-l) var(--ink-c) var(--h-viridian)));
  --pigment-v: linear-gradient(180deg, oklch(var(--ink-l) var(--ink-c) var(--h-lapis)), oklch(var(--ink-l) var(--ink-c) var(--h-tyrian)), oklch(var(--ink-l) var(--ink-c) var(--h-madder)), oklch(var(--ink-l) var(--ink-c) var(--h-lapis)));
  --pigment-c: conic-gradient(var(--lapis), var(--tyrian), var(--madder), var(--viridian), var(--lapis));

  --on-ink: oklch(.99 .003 85);
  --scrim: oklch(.2 .02 265 / .07);
  --backdrop: oklch(.16 .02 265 / .36);

  /* Aliases kept for the specimens */
  --gesso: var(--ground); --gesso-2: var(--surface-2); --fg: var(--ink); --fg-2: var(--ink-2);

  /* Type */
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-hero: clamp(5.25rem, 26vw, 13.5rem);
  --t-large: clamp(2.6rem, 11vw, 4.25rem);
  --t-1: clamp(1.85rem, 6.4vw, 2.6rem);
  --t-2: 1.4rem;
  --t-3: 1.1875rem;
  --t-body: 1.0625rem;
  --t-callout: 1rem;
  --t-sub: .9375rem;
  --t-foot: .8125rem;
  --t-cap: .75rem;

  /* Space: a 4 px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px;
  --gutter: 20px;

  /* Form */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --r-1: 10px; --r-2: 18px;

  /* Elevation */
  --e-1: 0 1px 2px oklch(.2 .02 265 / .06), 0 1px 1px oklch(.2 .02 265 / .04);
  --e-2: 0 2px 6px oklch(.2 .02 265 / .05), 0 14px 32px -12px oklch(.2 .02 265 / .16);
  --e-3: 0 6px 16px oklch(.2 .02 265 / .08), 0 32px 72px -20px oklch(.2 .02 265 / .34);
  --glass: color-mix(in oklch, var(--surface) 74%, transparent);
  --glass-line: oklch(.2 .02 265 / .09);

  /* Motion: every moving part shares one beat */
  --beat: 2400ms; --signal: 280ms;
  --ease-flow: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.45, .5, 1);
  --d-1: 160ms; --d-2: 280ms; --d-3: 420ms;

  /* Layout */
  --topbar-h: 52px; --dock-h: 62px; --measure: 44rem; --sidebar-w: 272px; --toc-w: 216px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink-l: .76; --ink-c: .14;
    --ground: oklch(.155 .012 268);
    --surface: oklch(.19 .014 268);
    --surface-2: oklch(.222 .016 268);
    --surface-3: oklch(.265 .018 268);
    --line: oklch(.305 .016 268);
    --line-2: oklch(.38 .018 268);
    --ink: oklch(.955 .006 268);
    --ink-2: oklch(.745 .012 268);
    --ink-3: oklch(.585 .012 268);
    --viridian: oklch(.78 .12 var(--h-viridian)); --ochre: oklch(.82 .13 var(--h-ochre)); --madder: oklch(.72 .16 var(--h-madder));
    --tyrian: oklch(.74 .15 var(--h-tyrian));
    --on-ink: oklch(.16 .012 268);
    --scrim: oklch(.95 .01 268 / .07);
    --backdrop: oklch(.05 .01 268 / .55);
    --e-1: 0 1px 2px oklch(0 0 0 / .4);
    --e-2: 0 2px 6px oklch(0 0 0 / .3), 0 16px 36px -12px oklch(0 0 0 / .55);
    --e-3: 0 6px 16px oklch(0 0 0 / .35), 0 36px 80px -20px oklch(0 0 0 / .7);
    --glass: color-mix(in oklch, var(--surface) 70%, transparent);
    --glass-line: oklch(1 0 0 / .08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink-l: .76; --ink-c: .14;
  --ground: oklch(.155 .012 268);
  --surface: oklch(.19 .014 268);
  --surface-2: oklch(.222 .016 268);
  --surface-3: oklch(.265 .018 268);
  --line: oklch(.305 .016 268);
  --line-2: oklch(.38 .018 268);
  --ink: oklch(.955 .006 268);
  --ink-2: oklch(.745 .012 268);
  --ink-3: oklch(.585 .012 268);
  --viridian: oklch(.78 .12 var(--h-viridian)); --ochre: oklch(.82 .13 var(--h-ochre)); --madder: oklch(.72 .16 var(--h-madder));
  --tyrian: oklch(.74 .15 var(--h-tyrian));
  --on-ink: oklch(.16 .012 268);
  --scrim: oklch(.95 .01 268 / .07);
  --backdrop: oklch(.05 .01 268 / .55);
  --e-1: 0 1px 2px oklch(0 0 0 / .4);
  --e-2: 0 2px 6px oklch(0 0 0 / .3), 0 16px 36px -12px oklch(0 0 0 / .55);
  --e-3: 0 6px 16px oklch(0 0 0 / .35), 0 36px 80px -20px oklch(0 0 0 / .7);
  --glass: color-mix(in oklch, var(--surface) 70%, transparent);
  --glass-line: oklch(1 0 0 / .08);
}

/* Text size, chosen in Settings. Every size in the system is in rem. */
html { font-size: calc(100% * var(--text-scale, 1)); }
html[data-text="l"] { --text-scale: 1.12; }
html[data-text="xl"] { --text-scale: 1.25; }

@media (min-width: 600px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --topbar-h: 60px; } }

/* Still: one switch stops all motion; state survives in colour and shape (WCAG 2.2.2) */
html.is-still *, html.is-still *::before, html.is-still *::after { animation-play-state: paused !important; }
/* Entrances must not freeze at their first frame */
html.is-still .enter, html.is-still .murmur { animation: none !important; }