/* ───────────────────────────────────────────────────────────────────────────
   Tokens. One definition per token; light-dark() picks the value from the
   active color-scheme, which follows the system unless <html data-theme> is set.
   Contrast (WCAG): ink 15:1, ink-2 8:1, ink-3 ≥ 4.6:1, rubric ≥ 4.8:1, ochre ≥ 4.6:1
   against paper and paper-sunk in both themes. rule-strong ≥ 3:1. No text is set below 12px.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-normal.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic; font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Malayalam: only fetched when a Malayalam glyph is drawn AND no system font in the stack
   before it has one (macOS, iOS, Android and Windows all do). */
@font-face {
  font-family: "RJ Malayalam";
  src: local("Noto Serif Malayalam"), url("../fonts/noto-serif-malayalam.woff2") format("woff2");
  font-weight: 400 600; font-display: swap;
  unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC;
}

:root {
  color-scheme: light dark;

  /* Paper and ink */
  --paper:        light-dark(#F4EFE6, #13120F);
  --paper-sunk:   light-dark(#EBE4D6, #0D0C0A);
  --paper-raised: light-dark(#FBF8F2, #1D1B17);
  --ink:          light-dark(#1C1A17, #EDE6D8);
  --ink-2:        light-dark(#4D473F, #BCB3A3);
  --ink-3:        light-dark(#6B645A, #958C7D);
  --rule:         light-dark(#D6CDBC, #2D2923);
  --rule-strong:  light-dark(#877A67, #736B5E);   /* ≥ 3:1 on paper and paper-raised: control borders (WCAG 1.4.11) */

  /* The one accent: rubric, the red of manuscript headings and marked passages. */
  --rubric:       light-dark(#AE3A1F, #E86B4C);
  --rubric-wash:  color-mix(in oklab, var(--rubric) 12%, var(--paper));

  /* Status. Never colour alone: each status also has a shape (see .mark). */
  --st-finished:  var(--ink);
  --st-deferred:  light-dark(#825C0E, #D6A443);
  --st-abandoned: var(--ink-3);

  /* Rating ramp, a single hue */
  --r3: color-mix(in oklab, var(--rubric) 38%, var(--paper));
  --r4: color-mix(in oklab, var(--rubric) 68%, var(--paper));
  --r5: var(--rubric);

  /* Sequential ramp for heatmaps (0 = nothing) */
  --seq-0: var(--paper-sunk);
  --seq-1: color-mix(in oklab, var(--rubric) 18%, var(--paper-sunk));
  --seq-2: color-mix(in oklab, var(--rubric) 38%, var(--paper-sunk));
  --seq-3: color-mix(in oklab, var(--rubric) 60%, var(--paper-sunk));
  --seq-4: color-mix(in oklab, var(--rubric) 82%, var(--paper-sunk));
  --seq-5: var(--rubric);

  /* Book-cloth colours for generated covers. Objects, so the same in both themes. */
  --cloth-text: #F3EBDD;

  /* Type */
  --f-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Malayalam MN", "Malayalam Sangam MN", "Noto Serif Malayalam", "Nirmala UI", "Kartika", "RJ Malayalam", serif;
  --f-text: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Malayalam MN", "Malayalam Sangam MN", "Noto Serif Malayalam", "Nirmala UI", "Kartika", "RJ Malayalam", serif;
  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Malayalam", "Nirmala UI", "RJ Malayalam", sans-serif;

  --t-numeral: clamp(6.5rem, 4rem + 13vw, 13.5rem);
  --t-display: clamp(2.75rem, 1.9rem + 4.2vw, 5rem);
  --t-title:   clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);
  --t-quote:   clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --t-lede:    clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  --t-body:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;
  --lh-body: 1.6;
  --lh-tight: 1.08;
  --track-caps: 0.12em;

  /* Space: a 4px base, mostly used in 8s */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* Layout */
  --gutter: 16px;
  --measure: 36rem;   /* ≈ 66 characters of body text */
  --wide: 75rem;      /* 1200px */
  --radius: 2px;      /* books have almost square corners */
  --radius-ui: 10px;
  --masthead-h: 48px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;

  --shadow-object: 0 1px 1px rgb(20 16 10 / 0.10), 0 6px 14px -6px rgb(20 16 10 / 0.35);
  --shadow-lift:   0 2px 2px rgb(20 16 10 / 0.10), 0 16px 28px -10px rgb(20 16 10 / 0.45);
  --shadow-float:  0 1px 2px rgb(0 0 0 / 0.08), 0 12px 40px -8px rgb(0 0 0 / 0.30);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}