/* PAVONIA — design tokens (the contract)
   Gate 2+3 of the website protocol. Every number downstream comes from here.
   Palette sampled from the venus plates 2026-08-18, contrast measured (WCAG). */

:root {
  /* ---- spacing (8px grid) ---- */
  --u: 8px;
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-12: 96px;

  /* section rhythm: half-padding system (96 / 128 / 192) */
  --rhythm-s: 48px;   /* small section: 48 top+bottom  */
  --rhythm-m: 64px;   /* medium: 64                    */
  --rhythm-l: 96px;   /* large: 96                     */

  /* ---- grid ---- */
  --max-w: 1280px;
  --margin: 64px;          /* desktop outside margin */
  --gap: 32px;

  /* ---- palette (60 paper / 30 sage / 10 gold) ---- */
  --paper:  #F4EFE7;  /* 60% — warm ivory ground                    */
  --sage:   #A9B29B;  /* 30% — sage section fields (decorative bg)  */
  --sage-deep: #6F7A65; /* sage for large text ≥24px only (3.2:1)   */
  --ink:    #2B2620;  /* text — 13.1:1 on paper ✓ any size          */
  --gold:   #7D6A45;  /* accent — 4.56:1 on paper ✓ any size        */
  --blush:  #EAD9D5;  /* blossom — decorative only, never text      */
  --line:   rgba(43, 38, 32, 0.18);  /* hairline rules              */
  --ink-light: #F2EBE1; /* text over the hero plates — 8.8:1 on stage ground ✓ */
  --ground: #3E4238;    /* hero stage behind the plates (decorative) */
  --card:   #FBF8F2;    /* vitrine card face (decorative bg)         */
  --gold-light: #C9B27E; /* gold labels on dark ink — 6.5:1 on ink ✓ */
  --ground-geisha: #1E2726; /* geisha reveal stage (decorative)      */
  --moss: #22312D;          /* house-of-the-peacock band (decorative) */
  --graphite: #17191D;      /* atelier + footer — metallic near-black  */

  /* ---- type ----
     Gambetta (contrast display serif, Fontshare) + Jost (geometric body).
     Swapped 31 Aug 2026 from Cormorant Garamond + Inter.
     Scale: 4 values. Tracking -0.02em. Titles 100%, body 130%.     */
  --f-display: "Gambetta", Georgia, serif;
  --f-body: "Jost", -apple-system, sans-serif;
  --t-body: 17px;   /* was 16 for Inter. Jost x-height measures 82.4% of Inter, so
                        the same number read visibly smaller. +1px restores the optical size. */
  --t-lede: 24px;
  --t-headline: clamp(40px, 6vw, 88px);
  --t-label: 14px;  /* was 13. Jost cap-height is 91% of Inter, and these are uppercase. */
  --track: -0.02em;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 810px) { :root { --margin: 32px; --gap: 24px; } }
@media (max-width: 390px) { :root { --margin: 24px; --gap: 24px; } }

/* layout primitives — every section uses these */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--margin); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }