/*
 * SpainReady design tokens — generated CSS custom properties.
 * Source of truth: config/tokens/*.tokens.json (Stage 2, validated;
 * colour/typography/elevation/motion resolved in Stage 7.5 Visual
 * Parity against index.html, the original SpainReady homepage).
 * DO NOT EDIT DIRECTLY — regenerate via generate_css.py.
 *
 * Deliberately excludes: icon family (pending-product-decision --
 * no component currently rendered on the public CUE page requires
 * one). See config/tokens/README.md for the full flagged-gap record.
 */

:root {
  /* Spacing (Golden UI Reference §1) */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Border radius (Golden UI Reference §9) */
  --radius-small: 6px;
  --radius-medium: 12px;
  --radius-large: 16px;

  /* Z-index (Engineering Foundation §2 — engineering-assigned, not a design value) */
  --z-base: 0;
  --z-sticky-nav: 10;
  --z-overlay: 100;
  --z-toast: 200;

  /* Colour (Stage 7.5 Visual Parity — resolved against index.html) */
  --color-primary: #C0392B;
  --color-primary-hover: #96281B;
  --color-primary-light: #F5E6E5;
  --color-secondary: #1A1A1A;
  --color-surface: #FFFFFF;
  --color-background: #FAFAF7;
  --color-border: #E8E8E4;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-muted: #8A8A8A;
  --color-success: #27AE60;
  --color-tip: #F4C430;
  --color-danger: #C0392B;

  /* Elevation (Stage 7.5 Visual Parity) */
  --elevation-none: none;
  --elevation-low: 0 1px 3px rgba(26, 26, 26, 0.04);
  --elevation-medium: 0 8px 24px rgba(192, 57, 43, 0.08);
  --elevation-high: 0 20px 60px rgba(26, 26, 26, 0.3);

  /* Motion (Stage 7.5 Visual Parity) */
  --motion-functional-duration: 200ms;
  --motion-functional-easing: ease;
  --motion-reduced-duration: 0ms;
  --motion-reduced-easing: none;

  /* Typography — font families (Stage 7.5 Visual Parity, verbatim legacy pairing) */
  --font-family-display: 'Fraunces', Georgia, serif;
  --font-family-body: 'Inter', Arial, sans-serif;

  /* Typography — weight scale (numeric, since CSS has no 'semibold' keyword) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography — approved scale (Golden UI Reference §9, unchanged by Stage 7.5) */
  --font-display-size: 40px;
  --font-display-line-height: 48px;
  --font-display-weight: 700;
  --font-h1-size: 32px;
  --font-h1-line-height: 40px;
  --font-h1-weight: 700;
  --font-h2-size: 24px;
  --font-h2-line-height: 32px;
  --font-h2-weight: 700;
  --font-h3-size: 20px;
  --font-h3-line-height: 28px;
  --font-h3-weight: 600;
  --font-body-large-size: 18px;
  --font-body-large-line-height: 28px;
  --font-body-large-weight: 400;
  --font-body-size: 16px;
  --font-body-line-height: 26px;
  --font-body-weight: 400;
  --font-caption-size: 13px;
  --font-caption-line-height: 18px;
  --font-caption-weight: 400;
  --font-label-size: 13px;
  --font-label-line-height: 16px;
  --font-label-weight: 600;
  --font-label-tracking: 0.05em;
  --font-button-size: 15px;
  --font-button-line-height: 20px;
  --font-button-weight: 600;

  /* Reading column width (Golden UI Reference §1) */
  --reading-column-min: 760px;
  --reading-column-max: 820px;
}

/*
 * Breakpoints (Golden UI Reference §6) — documented here, used literally
 * in @media rules, since CSS cannot use custom properties inside media
 * query conditions. This is a CSS-language limitation, not a deviation
 * from the token system — the values below are copied exactly from
 * breakpoints.tokens.json and must never be edited independently of it.
 *
 * bp.mobile: min 0px – max 767px
 * bp.tablet: min 768px – max 1023px
 * bp.laptop: min 1024px – max 1199px
 * bp.desktop: min 1200px and above
 */