/* The house system in the Paradigm register: every value a page, a banner or a video may use.
   Light is the default; dark is its own palette, not an inversion. Breakpoints: 600, 1024, 1360. */
/* the site's own families, self-hosted, so the archive asks no other host and downloads nothing the landing page did not */
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Geist Pixel'; src: url('/fonts/GeistPixel-Variable.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* colour lives in its own block so a light frame can sit inside a dark page */
:root, [data-theme='light'] {
  /* colour, light */
  --paper: #ffffff;              /* the page */
  --tile: #f8f9fb;               /* figure ground: thumbnails, plates, equation blocks */
  --ink: #0b0d12;                /* text and first-plane lines */
  --ink-2: #565c68;              /* secondary text */
  --ink-3: #8a909b;              /* counts, captions, muted lines */
  --ghost: #c3c6cf;              /* back-facing lines, unremarked marks */
  --hair: rgba(11, 13, 18, 0.08);  /* dividers */
  --wash: rgba(11, 13, 18, 0.04);  /* hover darkening on a figure */
  --chip: rgba(11, 13, 18, 0.045); /* [M] and Find [F] */
  --accent: #46599e;             /* one object per frame */
  --accent-soft: #aab8e0;        /* the accent's second voice: rings and halos, never text */
  --deep: #1e2846;               /* a contained dark band inside a light page */
  --good: #1f9268;               /* status only */
  --critical: #ce3f3f;           /* status only */
  --ground: var(--paper);        /* what a figure's filled marks cut out of */
  --logo-light: block;           /* which mark file shows on this ground */
  --logo-dark: none;
  color-scheme: light;
}

:root {
  /* type: a light sans for the voice, a mono for everything small */
  --font-voice: 'Satoshi', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-pixel: 'Geist Pixel', 'JetBrains Mono', monospace;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --fs-xs: 12px;          /* mono: dates, figure labels, captions */
  --fs-sm: 12px;          /* mono: meta, nav markers, buttons */
  --fs-body: 15px;
  --fs-lead: 16px;        /* article body */
  --fs-h-sm: 19px;
  --fs-h-lg: 22px;
  --fs-title: 22px;
  --fs-title-xl: 28px;
  --fs-title-xxl: 28px;
  --lh-tight: 1.1;
  --lh-ui: 1.25;
  --lh-mono-sm: 1.35;
  --lh-read: 1.5;
  --tr-mono: 0.02em;
  --tr-title: -0.01em;    /* 28px and up */
  --tr-display: -0.02em;  /* 56px and up */
  --tr-plate: -0.03em;    /* a numeral used as the picture */

  /* space: one scale, re-stepped per breakpoint; s4 is the column gutter and never changes */
  --s1: 4px;  --s2: 6px;  --s3: 16px;  --s4: 36px;  --s5: 32px;  --s6: 48px;
  --s7: 64px; --s8: 72px; --s9: 108px; --s10: 108px; --s11: 100px;

  /* grid */
  --cols: 6;
  --gutter: 16px;
  --margin: 16px;
  --max: 1752px;
  --header: 68px;
  --caption-w: 350px;     /* a stage caption never runs wider */
  --marker-w: 30px;       /* the [n] column of a bracket index: 2.5 x --fs-sm */
  --indent: 24px;         /* a nested nav group: min(--margin, 24px) */

  /* controls: square by decree, the one departure from the reference */
  --radius: 0;
  --btn-h: 34px;
  --btn-min: 34px;
  --btn-pad-lg: 12px;
  --btn-pad-sm: 8px;
  --btn-gap: 6px;
  --blur: 12px;

  /* marks: constant display size, like map symbols; a canvas scales them by its k */
  --stroke: 1px;
  --stroke-accent: 1.4px;
  --dash: 4 4;
  --dash-fine: 2 3;
  --arm: 4px;             /* a cross is 2 x arm + 1 */
  --sq: 8px;              /* the accent square */
  --node: 7px;            /* a graph node's radius */

  /* motion: opacity is quick and linear, travel is slow and eased */
  --ease-emphasized: cubic-bezier(.22, 1, .36, 1);
  --ease-rise: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(0, 1, 0, 1);
  --ease-travel: cubic-bezier(.85, 0, .15, 1);
  --t-flick: 70ms;
  --t-hover: 150ms;
  --t-header: 220ms;
  --t-shift: 280ms;
  --t-reveal: 300ms;
  --t-rise: 500ms;
  --t-draw: 800ms;
  --t-draw-long: 1200ms;
  --t-travel: 2400ms;
  --stagger: 70ms;
  --rise: 18px;

  --z-header: 40;
  --z-sticky: 50;
  --z-overlay: 60;
  --z-modal: 100;
}

@media (min-width: 600px) {
  :root {
    --fs-xs: 10px; --fs-body: 16px; --fs-lead: 16px; --fs-h-sm: 21px; --fs-h-lg: 23px;
    --fs-title: 24px; --fs-title-xl: 34px; --fs-title-xxl: 44px;
    --s1: 6px; --s2: 12px; --s3: 16px; --s5: 32px; --s6: 48px; --s7: 56px; --s8: 96px; --s9: 140px; --s10: 140px; --s11: 140px;
    --cols: 8; --gutter: 24px; --margin: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --fs-lead: 18px; --fs-h-lg: 25px; --fs-title: 28px; --fs-title-xl: 38px; --fs-title-xxl: 56px;
    --s1: 8px; --s2: 16px; --s3: 24px; --s5: 48px; --s6: 64px; --s7: 72px; --s8: 108px; --s9: 172px; --s10: 216px; --s11: 320px;
    --cols: 12; --btn-h: 30px; --btn-min: 40px;
  }
}
@media (min-width: 1360px) {
  :root { --gutter: 36px; --margin: 36px; }
}

[data-theme='dark'] {
  --paper: #0e1015;
  --tile: #161922;
  --ink: #eceef2;
  --ink-2: #a3a8b3;
  --ink-3: #6f7582;
  --ghost: #353a46;
  --hair: rgba(255, 255, 255, 0.1);
  --wash: rgba(255, 255, 255, 0.06);
  --chip: rgba(255, 255, 255, 0.08);
  --accent: #90a0d5;             /* blue-350: the house blue lifted to read on black */
  --accent-soft: #45558f;
  --deep: #1e2846;
  --ground: var(--paper);
  --logo-light: none;
  --logo-dark: block;
  color-scheme: dark;
}

/* deep: the navy band as a ground. Lines go pale blue and the accent is the one white thing. */
[data-theme='deep'] {
  --paper: #1e2846;
  --tile: #243060;
  --ink: #c5cfea;
  --ink-2: #aab8e0;
  --ink-3: #7688c9;
  --ghost: #34426f;
  --hair: rgba(255, 255, 255, 0.12);
  --wash: rgba(255, 255, 255, 0.06);
  --chip: rgba(255, 255, 255, 0.1);
  --accent: #ffffff;
  --accent-soft: #5f72b4;
  --ground: var(--paper);
  --logo-light: none;
  --logo-dark: block;
  color-scheme: dark;
}

/* mark classes: a figure's strokes carry a role, never a colour */
.g { fill: none; stroke-width: var(--stroke); stroke-linecap: butt; stroke-linejoin: miter; }
.g.ink { stroke: var(--ink); }
.g.mute { stroke: var(--ink-3); }
.g.ghost { stroke: var(--ghost); }
.g.accent { stroke: var(--accent); stroke-width: var(--stroke-accent); }
.g.soft { stroke: var(--accent-soft); }
.g.dash { stroke-dasharray: var(--dash); }
.g.fine { stroke-dasharray: var(--dash-fine); }
.g.cut { fill: var(--ground); }
/* a label cuts a 3px halo out of the marks behind it, so it never needs a box */
.g-label { font-family: var(--font-mono); letter-spacing: var(--tr-mono); fill: var(--ink-3); stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font-variant-numeric: tabular-nums; }
.g-label.ink { fill: var(--ink); }
.g-label.accent { fill: var(--accent); }
text.voice { font-family: var(--font-voice); font-weight: var(--w-light); letter-spacing: var(--tr-title); fill: var(--ink); }
text.voice.accent { fill: var(--accent); }