/* Design tokens — Sarahtonin Sounds
   Source: PROJECT-SPEC.md §3-5, ASSET-MANIFEST.md §11

   IMPORTANT: only --color-cream has a confirmed hex value in the spec
   docs. Near-black, gold, crimson, and the secondary accents below are
   PROVISIONAL placeholders so the foundation renders coherently — they
   are not approved brand colors. Replace with Sarah's confirmed values
   (ideally sourced from the actual gold wordmark asset once supplied)
   before any visual-polish phase ships. */

/* Licensed webfont — locally hosted, not a Google Fonts family.
   Only the Semi-Condensed style was chosen for --font-display, matching
   PROJECT-SPEC.md §5's approved display treatment. A second file,
   assets/fonts/Perandory-Condensed.woff2, was also supplied but is not
   wired up here since Semi-Condensed is the approved style. */
@font-face {
  font-family: 'Perandory Semi-Condensed';
  src: url('/assets/fonts/Perandory-SemiCondensed.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Openly licensed (SIL Open Font License) via Google Fonts, but now
   self-hosted the same way as Perandory above instead of loaded from
   fonts.googleapis.com: the Google Fonts stylesheet link was silently
   failing in at least one environment (a proxy/cert issue blocking
   fonts.googleapis.com), which made --font-marginalia render as a
   plain fallback cursive font instead of the real handwriting —
   confirmed by screenshot, not just by checking the CSS was set
   correctly (that check alone had given false confidence before).
   Self-hosting removes the extra network dependency entirely. File
   pulled directly from Google Fonts' own CDN (the same
   fonts.gstatic.com URL its stylesheet points to), not re-encoded. */
@font-face {
  font-family: 'Sue Ellen Francisco';
  src: url('/assets/fonts/SueEllenFrancisco.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* IM Fell English (SIL Open Font License), Regular + Italic — the only
   two cuts that exist. Self-hosted like Sue Ellen Francisco above, for
   the same reason: no dependency on fonts.googleapis.com. Files are
   Google Fonts' own latin woff2s from fonts.gstatic.com, not
   re-encoded. */
@font-face {
  font-family: 'IM Fell English';
  src: url('/assets/fonts/IMFellEnglish-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IM Fell English';
  src: url('/assets/fonts/IMFellEnglish-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color — core palette */
  --color-cream: #FFE6AC;         /* confirmed: PROJECT-SPEC.md §4, the one paper color sitewide */
  --color-paper: #FFE6AC;         /* same color as --color-cream; flat paper wherever the texture ends */
  --color-near-black: #1c1a16;    /* provisional */
  --color-gold: #c9a227;          /* provisional — confirm against wordmark asset */
  --color-crimson: #af3838;

  /* Color — secondary accents (use selectively, not all at once) */
  --color-dusty-pink: #d9a7a0;    /* provisional */
  --color-powder-blue: #a9c4d1;   /* provisional */
  --color-olive: #7c7a4a;         /* provisional */
  --color-lavender: #b7a8c9;      /* provisional */

  /* Color — semantic aliases */
  --color-bg: var(--color-paper);
  --color-text: var(--color-near-black);
  --color-accent: var(--color-gold);
  /* Near-black ring with a paper-colored gap: gold was about 1.9:1 on
     the paper and too faint to see. The gap keeps the ring readable on
     dark or busy backgrounds (red stripes, mood colors, photos). */
  --color-focus-ring: var(--color-near-black);
  --color-focus-gap: var(--color-paper);

  /* Typography — families
     Perandory Semi-Condensed, IM Fell English, and Sue Ellen Francisco
     are all locally hosted (see @font-face above); no page loads
     Google Fonts. Sue Ellen
     Francisco is used across Home, About, Contact, Journal, and
     Listen for handwritten marginalia/annotation-style text, not
     just Home's own annotations. Amoresa and Luxurious Script remain
     unloaded/fallback-only — see assets/fonts/README.md — and are
     never used to reconstruct the wordmark itself. */
  --font-display: 'Perandory Semi-Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IM Fell English', Georgia, serif;
  --font-marginalia: 'Sue Ellen Francisco', cursive;
  --font-logo-script: 'Amoresa', 'Luxurious Script', cursive; /* reserved — see note in assets/fonts/README.md; never used to reconstruct the wordmark itself */

  /* Typography — scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;

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

  /* Radius / borders — generic, not tied to a specific tactile treatment yet */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --border-thin: 1px solid currentColor;

  /* Layout */
  --content-max-width: 72rem;
  --nav-height: 4rem;
}