/* Hallmark · tokens for Prepdraw · custom theme "card stock and ballpoint" · genre: editorial
 * Every colour, face, size, space, rule, radius, easing and duration the site uses. site.css only references these.
 * Palette from the use scene: a quiet room, a laptop, a nervous first-year speaker. Light is warm card stock (the 3x5
 * notecard UIL allows) with blue-black ink and a ballpoint-blue accent; dark is the stage, blue-black with warm chalk
 * text. Red is kept for one job only, overtime. Contrast is computed in docs/reviews/M1-design.md.
 */

@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gloock-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Faces: Gloock, a condensed high-contrast serif, for headings and the topic cards (the printed slip you draw);
     Barlow, a grotesk drawn from highway signage, for everything a speaker reads at a glance, both clocks included:
     its figures are truly tabular (measured equal widths), its zero is plain, and signage is made to be read from a
     distance, which is how a standing speaker reads the clock. Gloock's own figures are not tabular. */
  --font-display: "Gloock", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Barlow", "Avenir Next", "Segoe UI", sans-serif;
  --weight-body: 500;
  --weight-strong: 600;

  /* Type scale, major third (1.25), fixed rem steps for a task tool. */
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-clock: 6rem;
  --text-clock-s: 4.25rem;
  --text-stage: 10rem;
  --text-stage-s: 5.5rem;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --measure: 65ch;

  /* Spacing, 4 px base, named by role. */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Surfaces and ink, light. */
  --color-paper: oklch(96.5% 0.012 85);
  --color-paper-2: oklch(93.5% 0.014 85);
  --color-paper-3: oklch(90.5% 0.016 85);
  --color-card: oklch(98.8% 0.006 90);
  --color-card-back: oklch(29% 0.04 262);
  --color-card-back-line: oklch(40% 0.045 262);
  --color-card-back-ink: oklch(98.5% 0.006 90);
  --color-rule: oklch(84% 0.014 85);
  --color-rule-strong: oklch(62% 0.014 85);
  --color-muted: oklch(47% 0.014 75);
  --color-ink: oklch(22% 0.018 262);
  --color-accent: oklch(46% 0.15 262);
  --color-accent-hover: oklch(40% 0.15 262);
  --color-accent-press: oklch(35% 0.14 262);
  --color-on-accent: oklch(98.5% 0.006 90);
  --color-accent-wash: oklch(91% 0.04 262);
  --color-focus: oklch(46% 0.15 262);
  --color-signal: oklch(52% 0.19 27);
  --color-signal-wash: oklch(93% 0.035 27);
  --color-caution: oklch(50% 0.11 65);
  --color-caution-wash: oklch(93% 0.04 75);
  --color-selection: oklch(86% 0.06 262);
  --color-shadow: oklch(30% 0.03 262 / 0.18);
  --color-scrim: oklch(22% 0.018 262 / 0.04);

  /* Rules, radii, depth. */
  --rule-hair: 1px;
  --rule-mid: 2px;
  --rule-heavy: 3px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-card: 0 1px 2px var(--color-shadow), 0 8px 24px -12px var(--color-shadow);
  --shadow-lift: 0 2px 4px var(--color-shadow), 0 18px 40px -16px var(--color-shadow);

  /* Motion. Exponential ease-out in, ease-in out; no bounce anywhere. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-deal: 560ms;
  --dur-flip: 620ms;

  /* Layers. */
  --z-raise: 2;
  --z-toast: 20;
  --z-skip: 30;
}

/* Dark, the stage: the same hues, only lightness and chroma move. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: oklch(17.5% 0.014 262);
    --color-paper-2: oklch(21.5% 0.016 262);
    --color-paper-3: oklch(25.5% 0.018 262);
    --color-card: oklch(24% 0.016 262);
    --color-card-back: oklch(31% 0.04 262);
    --color-card-back-line: oklch(42% 0.045 262);
    --color-card-back-ink: oklch(93.5% 0.012 85);
    --color-rule: oklch(33% 0.016 262);
    --color-rule-strong: oklch(52% 0.016 262);
    --color-muted: oklch(75% 0.012 85);
    --color-ink: oklch(93.5% 0.012 85);
    --color-accent: oklch(76% 0.11 255);
    --color-accent-hover: oklch(81% 0.1 255);
    --color-accent-press: oklch(70% 0.11 255);
    --color-on-accent: oklch(20% 0.02 262);
    --color-accent-wash: oklch(30% 0.06 262);
    --color-focus: oklch(76% 0.11 255);
    --color-signal: oklch(70% 0.16 27);
    --color-signal-wash: oklch(28% 0.06 27);
    --color-caution: oklch(78% 0.12 75);
    --color-caution-wash: oklch(28% 0.05 75);
    --color-selection: oklch(40% 0.08 262);
    --color-shadow: oklch(5% 0.01 262 / 0.6);
    --color-scrim: oklch(93.5% 0.012 85 / 0.04);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(17.5% 0.014 262);
  --color-paper-2: oklch(21.5% 0.016 262);
  --color-paper-3: oklch(25.5% 0.018 262);
  --color-card: oklch(24% 0.016 262);
  --color-card-back: oklch(31% 0.04 262);
  --color-card-back-line: oklch(42% 0.045 262);
  --color-card-back-ink: oklch(93.5% 0.012 85);
  --color-rule: oklch(33% 0.016 262);
  --color-rule-strong: oklch(52% 0.016 262);
  --color-muted: oklch(75% 0.012 85);
  --color-ink: oklch(93.5% 0.012 85);
  --color-accent: oklch(76% 0.11 255);
  --color-accent-hover: oklch(81% 0.1 255);
  --color-accent-press: oklch(70% 0.11 255);
  --color-on-accent: oklch(20% 0.02 262);
  --color-accent-wash: oklch(30% 0.06 262);
  --color-focus: oklch(76% 0.11 255);
  --color-signal: oklch(70% 0.16 27);
  --color-signal-wash: oklch(28% 0.06 27);
  --color-caution: oklch(78% 0.12 75);
  --color-caution-wash: oklch(28% 0.05 75);
  --color-selection: oklch(40% 0.08 262);
  --color-shadow: oklch(5% 0.01 262 / 0.6);
  --color-scrim: oklch(93.5% 0.012 85 / 0.04);
}