/* Design tokens: the single source of truth for colour, type, space and motion.
   Values and contrast ratios are documented in DESIGN.md; run
   `python3 mockup/_build/contrast.py` after changing a colour. These map to
   theme.json settings (color.palette, typography, spacing) in the block theme. */

:root {
  /* Colour */
  --c-red: #8C0000;        /* Rosso Sivet: the logo's red (brand fact) */
  --c-red-deep: #4A0606;   /* Rosso profondo: old site hover, dark bands */
  --c-olive: #56662C;      /* Oliva: video title green, darkened for AA; sequence, validity, wordmark stripe */
  --c-ink: #231818;        /* Inchiostro: body text */
  --c-white: #FFFFFF;      /* Bianco */
  --c-veil: #F6F1F0;       /* Velo: alternate bands */
  --c-muted: #5F5353;      /* secondary text */
  --c-field: #857776;      /* form field and control boundaries (>= 3:1) */
  --c-rule: #DDD3D1;       /* decorative separators only */
  --c-on-deep: #F2D9D6;    /* secondary text and focus ring on red bands */
  --c-red-bright: #AA0000; /* the veterinary mark's red (brand fact); third stripe segment */

  /* Type */
  --font-serif: "Besley", Georgia, "Times New Roman", serif;
  --font-sans: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Classic scale (px): 14 16 18 21 24 36 48 72 */
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-24: 1.5rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-72: 4.5rem;
  --fs-hero: clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem);     /* 36 -> 72 */
  --fs-section: clamp(1.875rem, 1.45rem + 1.8vw, 3rem);   /* 30 -> 48 */

  --lh-tight: 1.04;
  --lh-heading: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --measure: 68ch;

  /* Space (4 px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --band-pad: clamp(var(--sp-16), 3rem + 5vw, var(--sp-32));
  --container: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --header-h: 5rem;

  /* Radii, by hierarchy */
  --radius-field: 6px;
  --radius-poster: 24px;
  --radius-pill: 999px;

  /* Motion */
  --dur-ui: 180ms;
  --dur-sweep: 1400ms;    /* hero disc: counterclockwise fill */
  --delay-sweep: 200ms;
  --dur-reveal: 300ms;    /* hero wordmark fade-in after the fill */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* The logo's wedge: from 14deg to 78deg clockwise from twelve o'clock */
  --wedge-from: 14deg;
  --wedge-to: 78deg;
}