/* Hear Homer design tokens. The palette is the poem's: the wine-dark sea,
   sea foam, rosy-fingered dawn, and struck bronze. Every color in the build
   references these tokens; ad hoc hex values are a build smell. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/Bricolage-VF.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: optional;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/Literata-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/Literata-Italic-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: optional;
}

:root {
  /* color */
  --sea: #2A1622;          /* wine-dark ground: heroes, header, CTA island */
  --sea-deep: #1A0C14;     /* footer, deepest water */
  --sea-soft: #3A2130;     /* raised panels on dark */
  --sea-line: #4A2C3E;     /* borders on dark */
  --foam: #EEF2EA;         /* reading ground */
  --foam-deep: #E1E8DC;    /* cards and surfaces on light */
  --line: #C9D4C4;         /* borders on light */
  --ink: #26141E;          /* body text, wine-tinted */
  --ink-soft: #5D4A56;     /* secondary text */
  --inverse: #F4EFE9;      /* text on dark */
  --wine: #7E2547;         /* links and accents on light */
  --wine-deep: #5E1A34;    /* link hover */
  --dawn: #E9A13B;         /* saffron accent, lives mostly on dark */
  --dawn-deep: #8F5A10;    /* dawn for small text on light */
  --bronze: #8A5B24;       /* verification, badges */
  --terra: #C25E3A;        /* red-figure-vase terracotta: the warm accent */
  --terra-deep: #9C4526;
  --error: #8C2F2F;
  /* laurel mark (saffron), a decorative background used on the pick seal */
  --laurel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23E9A13B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 43 C13 39 9 26 12 13'/%3E%3Cpath d='M24 43 C35 39 39 26 36 13'/%3E%3Cpath d='M12 19 q-6 -1 -8 -6'/%3E%3Cpath d='M11 27 q-6 0 -9 -4'/%3E%3Cpath d='M13 34 q-6 1 -8 -3'/%3E%3Cpath d='M36 19 q6 -1 8 -6'/%3E%3Cpath d='M37 27 q6 0 9 -4'/%3E%3Cpath d='M35 34 q6 1 8 -3'/%3E%3C/svg%3E");
  /* cyclops eye (terracotta), decorative mark for 'skip it' warnings */
  --cyclops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23C25E3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 24 C13 14 35 14 43 24 C35 34 13 34 5 24 Z'/%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3Ccircle cx='24' cy='24' r='2.6' fill='%23C25E3A' stroke='none'/%3E%3Cpath d='M12 12 C18 8 30 8 36 12'/%3E%3C/svg%3E");

  /* type */
  --font-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body: 'Literata', Georgia, serif;
  --size-meta: 0.8125rem;
  --size-ui: 0.9375rem;
  --size-body: 1.0625rem;
  --size-h3: 1.1875rem;
  --size-h2: 1.5rem;
  --size-h1: clamp(2.05rem, 6.5vw, 3.1rem);

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  --radius: 3px;
  --measure: 78ch;

  /* subtle film-grain, generated inline (no asset, no request). Blended soft-light
     over the wine-dark surfaces so they read as textured, not flat. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}