/* ==========================================================================
   ThetaRev — Theme
   Every color, font, size and timing lives here.
   Change a value once and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* ---- Colors ---------------------------------------------------------- */
  /* Default theme ("ThetaRev"). Other themes live in themes.css and only
     override these base values; the derived colors below follow along.     */
  --color-paper:         #F7F4EE;  /* page background (warm ivory) */
  --color-paper-deep:    #EFE9DE;  /* slightly darker paper, for panels */
  --color-ink:           #1C2739;  /* headlines, primary text (deep ink navy) */
  --ink-rgb:             28, 39, 57;  /* same as --color-ink, as R, G, B */
  --color-ink-soft:      #3B4659;  /* body text */
  --color-mist:          #667185;  /* secondary text, labels (grey-blue) */
  --color-accent:        #A3824A;  /* accent (muted antique gold), use sparingly */
  --accent-rgb:          163, 130, 74;  /* same as --color-accent, as R, G, B */
  --color-accent-strong: #A3824A;  /* accent used for small text */

  /* Derived — no need to edit per theme */
  --color-accent-faint: rgba(var(--accent-rgb), 0.10);
  --color-accent-glow:  rgba(var(--accent-rgb), 0.18);
  --color-rule:         rgba(var(--ink-rgb), 0.14);  /* lines, axes */
  --color-rule-faint:   rgba(var(--ink-rgb), 0.06);  /* grid, guides */

  /* ---- Fonts ----------------------------------------------------------- */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif-weight: 400;  /* weight used for serif headlines */

  /* ---- Type sizes (fluid: min, preferred, max) -------------------------- */
  --text-display:  clamp(2.75rem, 7.5vw, 6rem);    /* hero headline */
  --text-headline: clamp(2.1rem, 5vw, 3.75rem);    /* section headlines */
  --text-title:    clamp(1.6rem, 3vw, 2.25rem);    /* the four words */
  --text-lead:     clamp(1.05rem, 1.6vw, 1.25rem); /* supporting lines */
  --text-body:     1rem;
  --text-small:    0.875rem;
  --text-micro:    0.6875rem;                      /* labels, annotations */

  --leading-tight: 1.05;
  --leading-body:  1.6;
  --tracking-label: 0.18em;   /* letter-spacing for uppercase labels */

  /* ---- Spacing --------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* ---- Layout ---------------------------------------------------------- */
  --width-page: 68rem;   /* max width of the page content */
  --width-text: 40rem;   /* max width of a line of text */
  --gutter: clamp(1rem, 5vw, 3rem);  /* side padding (16px on phones) */

  /* ---- Hero field ------------------------------------------------------ */
  --field-ratio: 5 / 2;         /* width / height on desktop */
  --field-ratio-mobile: 4 / 5;  /* width / height on phones */
  --bubble-scale-mobile: 0.72;  /* bubbles shrink a bit on phones */
  --label-faint: 0.5;           /* ticker labels when not in focus */

  /* ---- Texture --------------------------------------------------------- */
  --grain-opacity: 0.07;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-quick: 0.3s;
  --duration-slow: 1.4s;
  --duration-reveal: 1.2s;  /* bubble focus / label fade */
  --duration-axes: 2s;      /* axis labels fading in */
  --duration-aside: 3.2s;   /* how long the θ hover note stays */
}