@font-face {
  font-family: "Spectral";
  src: url("assets/fonts/spectral/spectral-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("assets/fonts/spectral/spectral-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("assets/fonts/spectral/spectral-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/*
 * Winebutler design tokens
 *
 * Brand colors, type family and radius range come from released illustration
 * guidance and the documented B2C 2.0 interface analysis. Spacing, type scale
 * and shadow geometry are implementation defaults until formally approved.
 */
:root {
  color-scheme: light;

  --color-brand-primary: #7a3b41;
  --color-brand-primary-strong: #7c2529;
  --color-brand-red: #ab2328;
  --color-brand-red-bright: #da291c;
  --color-brand-grape: #a8ad00;
  --color-brand-blue: #8094dd;
  --color-brand-white-wine: #f0e991;

  --color-text: #1a1410;
  --color-text-secondary: #4c3f33;
  --color-text-muted: #6a5d50;
  --color-text-inverse: #fffdf9;
  --color-background: #f7f3ed;
  --color-surface: #ffffff;
  --color-surface-soft: #f1ece5;
  --color-surface-tint: #e5e1e6;
  --color-border: #e8e2da;
  --color-focus: #8094dd;
  --color-error: #ab2328;
  --color-success: #667000;
  --color-warning: #7a6200;

  --font-display: "Spectral", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Spectral", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-caption: .75rem;
  --text-body: 1rem;
  --text-lead: clamp(1.08rem, 1.8vw, 1.25rem);
  --text-title: clamp(2.45rem, 4.5vw, 4.6rem);
  --text-hero: clamp(4.2rem, 8.5vw, 7.4rem);

  --space-page: clamp(1rem, 3vw, 2.5rem);
  --space-section: clamp(4.75rem, 7vw, 6.75rem);
  --space-card: clamp(1.35rem, 3vw, 2.2rem);
  --space-gap: clamp(1rem, 2.2vw, 1.75rem);

  --radius-input: 11px;
  --radius-card: 14px;
  --radius-feature: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 12px 36px rgba(76, 63, 51, .10);
  --shadow-raised: 0 20px 55px rgba(76, 63, 51, .14);
  --shadow-focus: 0 0 0 4px rgba(128, 148, 221, .35);

  --content-max: 1240px;
  --reading-max: 760px;
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-slow: 650ms;
}