/* Words We Keep — design tokens (color + type).
   Single source of truth; app.css and styleguide.html only reference these.
   Category palettes match the Figma "Colors" section (node 227:4163). */

/* No grey box when a link or button is tapped (Safari, iOS), on every page: the property is
   inherited, so one declaration here reaches every element of any page that loads this file —
   every page of the site does (Bill, 2026-10-10: "so I don't need to tell you again"). */
html { -webkit-tap-highlight-color: transparent; }

:root {
  /* ---------- Color: base ---------- */
  --paper: #E6E6E6;   /* main + menu background */
  --ink:   #000000;   /* main + menu text */
  --white: #ffffff;   /* text on ink (menu button, video play) */

  /* ---------- Color: category palettes (notes mode) ---------- */
  --perspective-bg: #05071f;  --perspective-fg: #d28fff;
  --growth-bg:      #1e090d;  --growth-fg:      #c5e363;
  --drive-bg:       #000242;  --drive-fg:       #ffd249;
  --community-bg:   #141f00;  --community-fg:   #ff859d;
  --romance-bg:     #490001;  --romance-fg:     #ced5ff;

  /* ---------- Color: semantic (what components use) ---------- */
  --bg: var(--paper);
  --fg: var(--ink);

  /* ---------- Type: families ---------- */
  --font-display:   'Instrument Serif', 'Noto Serif SC', Georgia, serif;  /* quotes, always italic */
  --font-text:      'Crimson Pro', Georgia, serif;                        /* navigation, meta, notes */
  /* Native scripts are always Noto Sans (the quote itself may be Noto Serif): Chinese first,
     then Japanese, Korean, and Noto Sans for Cyrillic, Greek and the rest of Latin. No system
     font in between, so every device shows the same letters. */
  --noto-sans: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif;
  --noto-sans-tc: 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif; /* traditional Chinese typed (js: nativeRuns → .n-hant) */
  --font-native:    var(--noto-sans);                                     /* native-script names (sans) */
  --font-native-quote: 'Ming SC', 'Songti SC', serif;                     /* original-language quotes (澹雅明体C, workers/fonts/tools/ming.py) */
  --font-native-ui: var(--noto-sans);
  /* A field (the form, the library): Crimson Pro, then each script's Noto, letter by letter —
     Cyrillic and Greek in Noto Serif as on the site; Japanese, Korean, traditional Chinese put
     their own Noto first (form.css [data-cjk]). Each Noto is drawn at the archive's scale. */
  --font-field: 'Field Noto Serif', 'Field Local Serif', 'Crimson Pro', 'Field Noto Sans Arabic', 'Field Noto Sans Hebrew', 'Field Noto Sans Thai', 'Field Noto Sans Devanagari', 'Field Noto Sans Bengali', 'Field Noto Sans Tamil', 'Field Noto Sans Telugu', 'Field Noto Sans Kannada', 'Field Noto Sans Malayalam', 'Field Noto Sans Gujarati', 'Field Noto Sans Gurmukhi', 'Field Noto Sans Oriya', 'Field Noto Sans Sinhala', 'Field Noto Sans Georgian', 'Field Noto Sans Armenian', 'Field Noto Sans Ethiopic', 'Field Noto Sans Khmer', 'Field Noto Sans Lao', 'Field Noto Sans Myanmar', 'Field Noto Sans SC', 'Field Noto Sans JP', 'Field Noto Sans KR', 'Field Local', 'Noto Serif', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans Thai', 'Noto Sans Devanagari', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', Georgia, serif; /* "Field …": the Notos at the archive's scale (js: fieldFonts); while one loads, the system stand-ins at the same scale show instead (form.css: Field Local); the plain Notos only for what those lack */
  --script-scale: 0.78;                                                   /* other scripts' Noto beside Crimson Pro: 42.0 ÷ 53.6, their x-heights */                                     /* language button: 中 日 한 / EN */

  /* ---------- Fluid unit ----------
     --u is "one design pixel". It is exactly 1px up to a 1440px-wide window, then grows with
     the window and stops at 1.5px (reached at 2160px). Type sizes AND the spacing around type
     are written as N * --u, so they always grow together. Tablet/mobile are always 1px.
     e.g. text is 16px at ≤1440, 17px at 1536, 19px at 1728, 21px at 1920. */
  --u: clamp(1px, 0.069444vw, 1.5px);   /* 100vw / 1440 */

  /* ---------- Type: text style (Figma "Serif") ---------- */
  --text-size: calc(16 * var(--u));
  --text-leading: 1.2;
  --text-tracking: -0.01em;
  --text-features: "ss01" 1, "ss07" 1, "onum" 1, "pnum" 1;           /* running text: old-style, proportional figures */
  --numeral-features: "ss01" 1, "ss07" 1, "lnum" 1, "tnum" 1;        /* counters (No. 8, the form pager, 1. 2. on the sheet): lining, tabular */
  --text-native-size: calc(12 * var(--u));   /* native-script author name beside Latin text */
  --glyph-size: 12px;         /* language button */

  /* ---------- Type: quote scale ----------
     Tier is picked by quote length (js/app.js → tier()):
     l ≤ 64 chars · m ≤ 160 · s ≤ 260 · xs longer. CJK characters count double.
     Each tier has a main size and a notes-mode size. */
  --quote-leading: 1.15;
  --quote-native-leading: 1.5;
  --quote-native-scale: 0.8;   /* CJK glyphs fill the whole em, so they run at 80% of the tier size */
  --quote-l: calc(64 * var(--u));   --quote-l-notes: calc(60 * var(--u));
  --quote-m: calc(52 * var(--u));   --quote-m-notes: calc(48 * var(--u));
  --quote-s: calc(40 * var(--u));   --quote-s-notes: calc(32 * var(--u));
  --quote-xs: calc(32 * var(--u));  --quote-xs-notes: calc(28 * var(--u));
  --quote-annotation: calc(64 * var(--u));   /* enlarged word in the annotation overlay */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0, 1);   /* the one curve for every transitional animation */
  --chrome-in: 0.6s;   /* the page's controls fading in: Notes and the arrows after the typing, "Add words" and the number back from the form, the form's arrows (was 0.3s; on --ease a fade reads as about half its length) */
  --ease-drop: cubic-bezier(0.2, 0.6, 0.1, 1);   /* the notes backdrop only: off at full speed, then a long brake into the bottom edge */

  /* ---------- Line ---------- */
  /* ---------- Spacing around type (scales with --u) ---------- */
  --notes-quote-top: calc(240 * var(--u));   /* top of the pinned quote in notes mode */
  --notes-quote-gap: calc(120 * var(--u));   /* quote → "Kept by" */
  --main-quote-lift: calc(40 * var(--u));    /* main quote sits this much above true center */
  --ann-gap: calc(24 * var(--u));            /* annotation overlay: enlarged word → its note */

  /* ---------- Mark (logo / category mark) — grows with the type ---------- */
  --mark: calc(24 * var(--u));   /* the symbol at the top left of every page, and beside a category's name in notes */

  /* Crimson Pro's capitals start this far below the top of their line box (16px text, leading
     1.2). Text that should line up with the mark's top edge is raised by it, so the caps —
     not the invisible line box — sit on the same line as the mark. */
  --cap-offset: 0.37em;
  --cap-height: 0.575em;   /* Crimson Pro capital height; the mark is centred on the caps */
  /* The mark's top so that its centre sits on the centre of the capitals whose line is at 20px;
     also its left offset, so it is the same distance from both edges. */
  --mark-top: calc(20px + var(--cap-height) / 2 - var(--mark) / 2);

  --hairline: 0.5px;
  --link-gap: 2px;   /* space between a link's text box and its underline */
}

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --text-size: calc(16 * var(--u));  --text-native-size: calc(12 * var(--u));
    --quote-l: calc(48 * var(--u));   --quote-l-notes: calc(48 * var(--u));
    --quote-m: calc(40 * var(--u));   --quote-m-notes: calc(40 * var(--u));
    --quote-s: calc(32 * var(--u));   --quote-s-notes: calc(32 * var(--u));
    --quote-xs: calc(26 * var(--u));  --quote-xs-notes: calc(26 * var(--u));
    --quote-annotation: calc(48 * var(--u));
  }
}

/* Mobile */
@media (max-width: 599px) {
  :root {
    --quote-l: calc(40 * var(--u));   --quote-l-notes: calc(40 * var(--u));
    --quote-m: calc(32 * var(--u));   --quote-m-notes: calc(32 * var(--u));
    --quote-s: calc(28 * var(--u));   --quote-s-notes: calc(28 * var(--u));
    --quote-xs: calc(22 * var(--u));  --quote-xs-notes: calc(22 * var(--u));
    --quote-annotation: calc(40 * var(--u));
  }
}

/* Notes mode takes the palette of the quote's first category. */
[data-theme="perspective"] { --bg: var(--perspective-bg); --fg: var(--perspective-fg); }
[data-theme="growth"]      { --bg: var(--growth-bg);      --fg: var(--growth-fg); }
[data-theme="drive"]       { --bg: var(--drive-bg);       --fg: var(--drive-fg); }
[data-theme="community"]   { --bg: var(--community-bg);   --fg: var(--community-fg); }
[data-theme="romance"]     { --bg: var(--romance-bg);     --fg: var(--romance-fg); }

/* ---------- Text style classes ---------- */
.t-text {
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  letter-spacing: var(--text-tracking);
  font-feature-settings: var(--text-features);
}
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: var(--quote-leading);
  letter-spacing: 0;
  font-feature-settings: normal;
}
.t-quote-native {
  font-family: var(--font-native-quote);
  font-weight: 400;
  font-style: normal;
  line-height: var(--quote-native-leading);
  letter-spacing: 0.02em;
}