/* Design tokens. Every color, size and font of the page comes from here.
   Light is a Séyès-ruled notebook page; dark is the same page at night, in ink blue.
   Colors are picked in OKLCH and written in hex: the area family shares one lightness and
   chroma, so only its hue changes. */
@font-face {
  font-family: 'Luciole';
  src: url('../fonts/Luciole-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Luciole';
  src: url('../fonts/Luciole-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Luciole';
  src: url('../fonts/Luciole-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Luciole';
  src: url('../fonts/Luciole-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-body: 'Luciole', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* Type: a 1.2 ratio on a 16px body, line heights on the 8px ruling. */
  --text-xs: 0.875rem; /* 14 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.1875rem; /* 19 */
  --text-xl: 1.4375rem; /* 23 */
  --text-2xl: 1.75rem; /* 28 */
  --text-3xl: 2.125rem; /* 34 */
  --text-hero: clamp(3rem, 9vw, 5.5rem);
  /* Fingerprint symbols: in the page, in the presenter's margin, and in presentation mode. */
  --text-emoji: clamp(1.75rem, 8vw, 2.5rem);
  --text-emoji-margin: 2rem;
  --text-emoji-present: clamp(2.5rem, 7vw, 5rem);
  --leading: 1.5rem;

  /* Spacing on the 8px ruling. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  --rule: 8px;
  --rule-big: 32px;
  --margin: 20px; /* distance from the page edge to the red margin line */
  --gutter: 16px;
  --header: 64px;
  --radius-square: 2px; /* task squares, swatches, bars */
  --radius-slip: 4px; /* the QR paper slip */
  --radius: 6px;
  --radius-card: 12px;
  --target: 44px;
  --measure: 70ch;
  --page: 72rem;
  --focus-width: 3px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 150ms ease-out;

  /* Notebook (light). Text pairs are at least 5.5:1 on the paper, borders and focus at least
     3:1. The ruling stays faint: it is the paper, not the content. */
  --paper: #fafbfe;
  --field: #ffffff;
  --rule-minor: #edf0f9;
  --rule-major: #d6def1;
  --margin-line: #de7d8a;
  --ink: #1a233c;
  --pencil: #4d5566;
  --border: #7c869f;
  --accent: #2647ae;
  --accent-hover: #1a358d;
  --accent-text: #ffffff;
  --red: #c2272d;
  --red-text: #ffffff;
  --green: #1e7546;
  --ochre: #8a5600;
  --focus: #c26300;
  --selection: #d8e5ff;
  --slip-shadow: 0 1px 2px rgb(22 33 61 / 0.12), 0 6px 16px rgb(22 33 61 / 0.08);
  --on-cover: #ffffff;
  /* One header for every page; the area shows in the bar under it. White on it is 15:1. */
  --header-bg: #182448;

  /* Area colors (OKLCH L 0.45): the bar under the header, and the lettering of each Home
     door on its tint. White on each is above 7:1, each on its tint above 6:1. */
  --cover-slate: #455063;
  --cover-blue: #334f9d;
  --cover-green: #056641;
  --cover-ochre: #774914;
  --cover-teal: #00626a;
  --cover-violet: #614092;
  --tint-slate: #e7effc;
  --tint-blue: #e0efff;
  --tint-green: #d9f7e5;
  --tint-ochre: #ffeacf;
  --tint-teal: #d4f6fa;
  --tint-violet: #f3e8ff;

  /* Device inks, in order; red is kept for corrections. */
  --ink-0: #1d3b9a;
  --ink-1: #6a3fa0;
  --ink-2: #12808f;
  --ink-3: #1e7a4c;
  --ink-4: #8a5a2b;
  --ink-5: #1a1a2e;
  --ink-6: #5c6b12; /* olive: kept well away from the correction red */
  --ink-7: #44506b;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Night page: ink-blue paper, chalk-white writing, pastel inks; the ruling barely shows. */
    --paper: #0f1526;
    --field: #080d1a;
    --rule-minor: rgb(220 228 255 / 0.035);
    --rule-major: rgb(220 228 255 / 0.08);
    --margin-line: #cc7580;
    --ink: #e7ebf4;
    --pencil: #b0b8c8;
    --border: #768096;
    --accent: #9bbeff;
    --accent-hover: #bbd5ff;
    --accent-text: #080d1a;
    --red: #fb9890;
    --red-text: #080d1a;
    --green: #95deae;
    --ochre: #efcc83;
    --focus: #ffa659;
    --selection: #27365c;
    --slip-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 6px 16px rgb(0 0 0 / 0.3);
    --header-bg: #060a1a;

    /* Darker area colors (OKLCH L 0.40); at night the Home doors are written in white on
       them (above 8.5:1), so the tints are the colors themselves. */
    --cover-slate: #394353;
    --cover-blue: #2b4382;
    --cover-green: #145538;
    --cover-ochre: #633e16;
    --cover-teal: #00525a;
    --cover-violet: #523779;
    --tint-slate: var(--cover-slate);
    --tint-blue: var(--cover-blue);
    --tint-green: var(--cover-green);
    --tint-ochre: var(--cover-ochre);
    --tint-teal: var(--cover-teal);
    --tint-violet: var(--cover-violet);

    --ink-0: #a9c6ff;
    --ink-1: #cdb0ff;
    --ink-2: #8ed9e0;
    --ink-3: #a3e2b6;
    --ink-4: #f2c48b;
    --ink-5: #f3f1e7;
    --ink-6: #d9e27a;
    --ink-7: #b3bdcc;
  }
}

@media (min-width: 40rem) {
  :root {
    --margin: 48px;
    --gutter: 24px;
  }
}
@media (min-width: 64rem) {
  :root {
    --margin: 240px;
    --gutter: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}