/* ==========================================================================
   quinepub — design tokens
   Editorial "field guide" system: warm paper, ink, one accent, and a
   small set of meaning-carrying colors. Light is the default edition;
   dark is the "night edition". Every component reads only these tokens.
   ========================================================================== */

:root {
  /* ---- Type families ---------------------------------------------------- */
  --font-serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;   /* reading + display */
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* UI, labels */
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;  /* code, figure numbers */

  /* ---- Type scale (major third, 1.25) ----------------------------------- */
  --t-2xs: 10.5px;  /* overlines, tags */
  --t-xs:  12px;    /* captions, meta */
  --t-sm:  13.5px;  /* UI */
  --t-md:  16.5px;  /* entry body */
  --t-body: 17px;   /* long-form body */
  --t-lg:  21px;    /* lede, chapter intro */
  --t-xl:  26px;    /* entry title, pull quote */
  --t-2xl: 33px;
  --t-3xl: 44px;    /* chapter title */
  --t-hero: clamp(46px, 7.2vw, 92px); /* masthead */

  --lh-tight: 1.04;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --tracking-caps: .12em;   /* small caps / overlines */
  --measure: 62ch;          /* comfortable reading line */

  /* ---- Space (4px base) ------------------------------------------------- */
  --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: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --page-max: 1240px;

  /* ---- Shape & motion --------------------------------------------------- */
  --r-1: 3px; --r-2: 6px; --r-3: 12px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 400ms;

  /* ---- Color: the "day edition" ----------------------------------------- */
  --paper:   #f5f1e8;   /* page */
  --paper-2: #ece6d9;   /* figure plates, code */
  --paper-3: #e1d9c8;   /* pressed / hover plates */
  --ink:     #1c1a16;   /* text, strong rules */
  --ink-2:   #4a453c;   /* body copy */
  --ink-3:   #847d6f;   /* captions, meta */
  --rule:    #d8cfbd;   /* hairlines */
  --accent:  #c4401f;   /* vermilion: links, emphasis, focus */
  --accent-ink: #fffaf2;
  --marker:  #f2d47c;   /* selection / highlight */
  --shadow:  0 30px 80px rgba(40, 30, 10, .18);

  /* Meaning colors: one per purpose. Used as text, rules and dots only. */
  --p-model:  #2e7d5b;
  --p-look:   #b8336a;
  --p-fx:     #d4691e;
  --p-camera: #2b6cb0;
  --p-anim:   #a8840e;
  --p-eng:    #4c51bf;
  --p-perf:   #7b3fa0;
  --p-all:    var(--ink);

  /* Figure palette: for diagrams and live demos (needs to read on paper-2). */
  --fig-1: #3d63dd; --fig-2: #1f9d7a; --fig-3: #e0861a;
  --fig-4: #d6407a; --fig-5: #8457d6; --fig-6: #1e9ecf; --fig-7: #e2683c;
}

:root[data-theme="dark"] {
  /* ---- Color: the "night edition" --------------------------------------- */
  --paper:   #13120f;
  --paper-2: #1d1b17;
  --paper-3: #2a2721;
  --ink:     #ede7da;
  --ink-2:   #c2baa9;
  --ink-3:   #8a8374;
  --rule:    #34302a;
  --accent:  #ff6e4a;
  --accent-ink: #1a0d08;
  --marker:  #6b5513;
  --shadow:  0 30px 80px rgba(0, 0, 0, .55);

  --p-model:  #4fbf8f;
  --p-look:   #ef6aa0;
  --p-fx:     #ff9a4a;
  --p-camera: #5aa2ec;
  --p-anim:   #e2bd3c;
  --p-eng:    #8b8ff0;
  --p-perf:   #b884e0;

  --fig-1: #6e8bff; --fig-2: #2ec4a6; --fig-3: #f5a524;
  --fig-4: #ef5da8; --fig-5: #a77bf3; --fig-6: #4cc0f0; --fig-7: #ff7a45;
}

/* Aliases read by the live demos (canvas + WebGL pull colors from these). */
:root {
  --bg: var(--paper-2);   --fg: var(--ink);   --mut: var(--ink-3);
  --bd: var(--rule);      --crd: var(--paper); --acc: var(--accent); --accfg: var(--accent-ink);
  --c1: var(--fig-1); --c2: var(--fig-2); --c3: var(--fig-3);
  --c4: var(--fig-4); --c5: var(--fig-5); --c6: var(--fig-6); --c7: var(--fig-7);
  --rad: var(--r-2); --mono: var(--font-mono); --sans: var(--font-sans);
  --X: #e5484d; --Y: #30a46c; --Z: #3e7bfa;
}