/* ============================================================
   Golden Hour Aging — design tokens.

   The palette is HER paid identity, not a choice of ours: champagne #EFDB93,
   navy #12294A, black, white, from the four-page brand guide read 2026-09-02.
   The three additions are the three things the guide does not cover, per the
   build direction (§6): a warm off-white ground, a body typeface, and an
   accessible button treatment (champagne is too pale under white text, so
   buttons are navy-filled on light grounds and champagne-filled with navy
   text on dark ones).

   Type: Playfair Display stands in for Adorage (display serif, licensed OFL,
   self-hosted) because the Adorage .otf shipped in an Etsy logo package with
   no web-embedding license, and she confirmed 2026-09-04 that she holds no
   receipt or license for it. Body: Source Sans 3 (humanist sans, OFL),
   17px minimum for a 45-65 reader on a phone at night.

   Radius system, documented: panels 28px, cards 20px, images 18px,
   inputs 10px, buttons pill. One accent (champagne family), locked.
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-italic-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/sourcesans-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/sourcesans-italic-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* grounds. The page GROUND is a deeper warm sand so every panel reads as a
     card floating on it (the n2 grammar). Paper panels must stay visibly
     lighter than the ground or the section rhythm disappears. */
  --ground: #EAE3D4;
  --paper: #F7F4EE;
  --cream: #EFE8DA;
  --wash: #F7EED7;
  --navy: #12294A;
  --navy-deep: #0C1D38;

  /* ink */
  --ink: #26324B;
  --ink-strong: #12294A;
  --mut: #5B6577;
  --on-navy: #E9E6DE;
  --on-navy-mut: #AEB9CC;

  /* accent (one family) */
  --champagne: #EFDB93;
  --gold-deep: #7E6128;
  --gold-line: #D9C27A;

  /* type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* 17-18px */
  --fs-small: 0.875rem;
  --fs-h1: clamp(2.15rem, 1.4rem + 3.4vw, 3.4rem);
  --fs-h2: clamp(1.55rem, 1.2rem + 1.6vw, 2.15rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --lh-body: 1.65;

  /* rhythm */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --sect: clamp(3.5rem, 8vw, 6.5rem);      /* inside a panel, color change   */
  --seam: clamp(2.5rem, 5vw, 4rem);        /* seam inside one ground         */
  --gutter: clamp(1rem, 4vw, 2rem);
  --page-gutter: clamp(0.5rem, 1.4vw, 1.25rem);  /* around rounded panels    */

  /* shape */
  --r-panel: 28px;
  --r-card: 20px;
  --r-img: 18px;
  --r-input: 10px;

  /* depth: tinted to the ground, never pure black */
  --shadow-soft: 0 12px 34px rgba(18, 41, 74, 0.08);
  --shadow-lift: 0 20px 50px rgba(18, 41, 74, 0.12);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press: transform 160ms var(--ease-out);
}

@media (max-width: 47.9rem) {
  :root {
    --r-panel: 18px;
    --r-card: 16px;
  }
}