/*
  TNCHS Research Library: design tokens.

  Colors are written in three blocks:
    1. light theme (the default "paper" look)
    2. dark theme when the device is set to dark mode
    3. dark theme when the reader picks it with the toggle button
  Blocks 2 and 3 must be identical. tests/test_design_tokens.py checks that,
  and checks every text/background pair for WCAG AA contrast.

  TNCHS green (--brand) is the school color. Amber (--accent) is for rules,
  markers and focus only. Never use it as text on paper, and never fill a
  large area with it. The logo's bright green (#259D4F) is too light for text.
*/

/* ---------- 1. Light theme: paper ---------- */
:root {
  --paper: #FAF7F0;
  --paper-raised: #FFFDF8;
  --paper-sunk: #F1ECE1;
  --ink: #1D1C1A;
  --ink-muted: #4B4740;
  --ink-faint: #6A655B;
  --rule: #DCD4C4;
  --rule-strong: #1D1C1A;
  --field-border: #8A8375;
  --brand: #0F4D2C;
  --brand-2: #1B6B3A;
  --on-brand: #FAF7F0;
  --accent: #F2A93B;
  --accent-deep: #E8A020;
  --catalog-ink: #0F4D2C;
  --link: #0F4D2C;
  --highlight: #FBE3B5;
  --error: #9A2B1E;
  --success: #2F5D3A;
  --focus-gap: #FAF7F0;
  --focus-ring: #0F4D2C;
  --focus-halo: #F2A93B;
  --photo-opacity: 1;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- 2. Dark theme: reading room at night, forest green (device setting) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F2A1C;
    --paper-raised: #163826;
    --paper-sunk: #0A2014;
    --ink: #F2EDE2;
    --ink-muted: #C8C1B2;
    --ink-faint: #A69F90;
    --rule: #2C4A38;
    --rule-strong: #C8C1B2;
    --field-border: #7F9A88;
    --brand: #F2EDE2;
    --brand-2: #E4DDCF;
    --on-brand: #0F2A1C;
    --accent: #F2A93B;
    --accent-deep: #E8A020;
    --catalog-ink: #F2A93B;
    --link: #F2EDE2;
    --highlight: #5A4318;
    --error: #F2A596;
    --success: #A5D1A8;
    --focus-gap: #0F2A1C;
    --focus-ring: #F2EDE2;
    --focus-halo: #F2A93B;
    --photo-opacity: 0.5;  /* dim the building photos at night */
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

/* ---------- 3. Dark theme: reading room at night (toggle button) ---------- */
:root[data-theme="dark"] {
    --paper: #0F2A1C;
    --paper-raised: #163826;
    --paper-sunk: #0A2014;
    --ink: #F2EDE2;
    --ink-muted: #C8C1B2;
    --ink-faint: #A69F90;
    --rule: #2C4A38;
    --rule-strong: #C8C1B2;
    --field-border: #7F9A88;
    --brand: #F2EDE2;
    --brand-2: #E4DDCF;
    --on-brand: #0F2A1C;
    --accent: #F2A93B;
    --accent-deep: #E8A020;
    --catalog-ink: #F2A93B;
    --link: #F2EDE2;
    --highlight: #5A4318;
    --error: #F2A596;
    --success: #A5D1A8;
    --focus-gap: #0F2A1C;
    --focus-ring: #F2EDE2;
    --focus-halo: #F2A93B;
    --photo-opacity: 0.5;  /* dim the building photos at night */
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: dark;
}

/* ---------- Type, space and motion (same in both themes) ---------- */
:root {
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* Type scale, about 1.333 (a "perfect fourth"). Body text is 17px. */
  --step--2: 0.75rem;   /* 12px  labels */
  --step--1: 0.875rem;  /* 14px  metadata, small text */
  --step-0: 1.0625rem;  /* 17px  body */
  --step-1: 1.4375rem;  /* 23px  card titles */
  --step-2: 1.875rem;   /* 30px  section headings */
  --step-3: clamp(2.125rem, 1.6rem + 2.2vw, 2.5rem);   /* 34-40px search field */
  --step-4: clamp(2.5rem, 1.7rem + 3.4vw, 3.375rem);   /* 40-54px page titles */
  --step-5: clamp(2.875rem, 1.6rem + 5.4vw, 4.5rem);   /* 46-72px display */

  /* Spacing sits on a 4px baseline grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --measure: 66ch;   /* comfortable reading line length */
  --radius: 2px;     /* corners stay nearly square */

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;

  --gutter: 1rem;
  --page-max: 78rem;
}

@media (min-width: 48em) {
  :root { --gutter: 2rem; }
}