/* NextWeb theme — Alliana Ollisari · « Rose écarlate »
   The site's ENTIRE design system lives in this file.
   MACHINE CONVENTION (lint + builder both rely on it):
   - Colors: 1 brand + neutrals + at most 2 accents, written as literal
     hsl(...) — never var() chains deeper than ONE hop.
   - Contrast pairs are NAMED --x / --on-x: --on-x must be readable on --x (WCAG AA).
   - All other CSS files use ONLY these tokens (no raw hex outside this file).
   Hues: crimson (brand, the OC's red) · warm charcoal + bone (neutrals) · antique gold (accent). */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — pairs (--x / --on-x) */
  --surface:        hsl(350 12% 7%);            /* warm charcoal — the gallery wall */
  --on-surface:     hsl(30 30% 93%);            /* bone */
  --surface-alt:    hsl(350 10% 11%);           /* lifted charcoal — cards, alternating bands */
  --on-surface-alt: hsl(30 30% 93%);
  --surface-veil:   hsl(350 12% 7% / 0.82);     /* condensed nav backdrop */
  --brand:          hsl(352 78% 42%);           /* the OC's crimson — fills, CTA */
  --on-brand:       hsl(30 30% 96%);
  --brand-deep:     hsl(352 80% 35%);           /* CTA hover */
  --brand-text:     hsl(352 84% 61%);           /* crimson for SMALL text on --surface (5.2:1) and --surface-alt (4.7:1) */
  --brand-line:     hsl(352 78% 42% / 0.55);    /* hairline frames */
  --brand-veil:     hsl(352 78% 42% / 0.14);    /* pill + icon discs */
  --accent:         hsl(40 45% 62%);            /* antique gold — kickers, numerals */
  --on-accent:      hsl(350 12% 7%);
  --accent-line:    hsl(40 45% 62% / 0.45);
  --muted:          hsl(350 8% 64%);            /* used ON --surface / --surface-alt */
  --border:         hsl(30 30% 93% / 0.10);
  --border-strong:  hsl(30 30% 93% / 0.28);
  --scrim:          hsl(350 12% 5% / 0.94);     /* lightbox backdrop */

  /* type — Fraunces display over Inter (voice: editorial) */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --text-sm:   clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --text-lg:   clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --text-xl:   clamp(1.56rem, 1.44rem + 0.6vw, 2rem);
  --text-2xl:  clamp(1.95rem, 1.75rem + 1vw, 2.66rem);
  --text-hero: clamp(3rem, 2.4rem + 3.5vw, 5.5rem);
  --leading-body: 1.55;
  --leading-tight: 1.08;

  /* spacing — 8pt scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* shape & depth */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px hsl(350 30% 3% / 0.4), 0 2px 8px hsl(350 30% 3% / 0.4);
  --shadow:    0 2px 6px hsl(350 30% 3% / 0.45), 0 18px 40px hsl(350 30% 3% / 0.55);
  --shadow-brand: 0 8px 24px hsl(352 78% 42% / 0.35);
  --glow-brand: 0 0 0 4px hsl(352 78% 42% / 0.16), 0 0 32px hsl(352 78% 42% / 0.5);   /* status pill halo */

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 220ms;
}