/* Design tokens — ratified on issue #25.
   This file is loaded BEFORE app.css. Token values defined here are the
   single source of truth for typography, brand color, and size scale.
   App-level overrides and component CSS live in app.css and only consume
   these tokens via var(--token-name); they must not redefine the tokens. */

:root {
  /* ---- Typography ---------------------------------------------------- *
   * Two families kept on purpose ("premium feel" per #25 ratification).
   * --font-display is the serif used for headings and brand moments.
   * --font-body is the sans used for everything else.
   * ------------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- Brand palette ------------------------------------------------- *
   * Two brand colors only. Every other shade derives from these via
   * opacity (rgba) or brightness, never via a third hue.
   * ------------------------------------------------------------------- */
  --color-blue: #002866;
  --color-gold: #c79c4c;

  /* Opacity-derived variants. RGB triplets kept inline so utilities can
     compose new opacities without re-declaring the hex. */
  --color-blue-rgb: 0, 40, 102;
  --color-gold-rgb: 199, 156, 76;

  --color-blue-soft: rgba(var(--color-blue-rgb), 0.8);
  --color-blue-faint: rgba(var(--color-blue-rgb), 0.4);
  --color-blue-thin: rgba(var(--color-blue-rgb), 0.12);
  --color-gold-soft: rgba(var(--color-gold-rgb), 0.8);
  --color-gold-faint: rgba(var(--color-gold-rgb), 0.4);
  --color-gold-thin: rgba(var(--color-gold-rgb), 0.12);

  /* ---- Type scale ---------------------------------------------------- *
   * Three sizes for non-hero text (12 / 16 / 20 px) + one hero-only size
   * (24 px) reserved for hero h1. Hierarchy is otherwise expressed via
   * weight and opacity, not size. Values in rem so they scale with the
   * root font-size.
   * ------------------------------------------------------------------- */
  --size-xs: 0.75rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-hero: 1.5rem;

  /* ---- Display scale (additive — UI elevation pass) ------------------ *
   * Larger sizes reserved for the serif "display moments" (homepage hero,
   * interior page-hero banners, closing CTA, section heads). Fluid via
   * clamp() so headlines breathe on desktop yet stay tidy on mobile. The
   * compact xs/md/lg/hero scale above is intentionally LEFT UNCHANGED —
   * these only add new top-end steps; they do not redefine the originals.
   * Serif still the only display family; no new hue introduced. */
  --size-display: clamp(2.3rem, 1.35rem + 3.4vw, 3.5rem);
  --size-h1: clamp(1.85rem, 1.3rem + 2vw, 2.6rem);
  --size-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --size-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);

  /* Display leading + tracking — tighter than body for elegant headlines. */
  --leading-display: 1.1;
  --tracking-display: -0.012em;
  --tracking-eyebrow: 0.16em;
}