/**
 * Rebuild design tokens: colour, space, type, radii, elevation. Load first.
 * No selectors here except :root. Layer contract: rebuild/SYSTEM-RULES.md
 */
:root {
  --color-ink: #241a1f;
  --color-ink-soft: #453a42;
  --color-sand: #f6f1e8;
  --color-surface: #fffdfa;
  --color-surface-muted: #efe7da;
  --color-gold: #d99a3d;
  --color-gold-deep: #b87f2d;

  --color-ink-muted: #6b5f66;

  /* Ink at alpha: borders, shadows, focus */
  --color-ink-a04: rgba(36, 26, 31, 0.04);
  --color-ink-a06: rgba(36, 26, 31, 0.06);
  --color-ink-a08: rgba(36, 26, 31, 0.08);
  --color-ink-a12: rgba(36, 26, 31, 0.12);
  --color-ink-a14: rgba(36, 26, 31, 0.14);
  --color-ink-a28: rgba(36, 26, 31, 0.28);

  --color-line: var(--color-ink-a12);

  /* Ivory surface (#fffdfa) at alpha: glass, sticky chrome, cards */
  --color-surface-a08: rgba(255, 253, 250, 0.08);
  --color-surface-a62: rgba(255, 253, 250, 0.62);
  --color-surface-a76: rgba(255, 253, 250, 0.76);
  --color-surface-a78: rgba(255, 253, 250, 0.78);
  --color-surface-a86: rgba(255, 253, 250, 0.86);
  --color-surface-a88: rgba(255, 253, 250, 0.88);
  --color-surface-a90: rgba(255, 253, 250, 0.9);
  --color-surface-a92: rgba(255, 253, 250, 0.92);
  --color-surface-a94: rgba(255, 253, 250, 0.94);
  --color-surface-a95: rgba(255, 253, 250, 0.95);
  --color-surface-a96: rgba(255, 253, 250, 0.96);
  --color-surface-a98: rgba(255, 253, 250, 0.98);

  --color-surface-muted-a72: rgba(239, 231, 218, 0.72);
  --color-surface-muted-a92: rgba(239, 231, 218, 0.92);

  /* Warm paper (CTA / cream panels) */
  --color-warm-paper-a98: rgba(255, 251, 244, 0.98);
  --color-warm-paper-a96: rgba(245, 235, 214, 0.96);

  /* Gold / accent alpha */
  --color-accent-wash: rgba(217, 154, 61, 0.12);
  --color-accent-strong: rgba(217, 154, 61, 0.24);
  --color-accent-hover: rgba(217, 154, 61, 0.08);
  --color-gold-deep-a18: rgba(184, 127, 45, 0.18);
  --color-gold-deep-a22: rgba(184, 127, 45, 0.22);
  --color-gold-deep-a24: rgba(184, 127, 45, 0.24);
  --color-gold-deep-a35: rgba(184, 127, 45, 0.35);
  --color-gold-deep-a40: rgba(184, 127, 45, 0.4);
  --color-gold-pressed-a45: rgba(125, 84, 27, 0.45);

  /* Form validation */
  --color-danger: #b42318;
  --color-danger-border: #d92d20;
  --color-danger-ring: rgba(217, 45, 32, 0.35);

  /* Type on dark bands (hero strip, etc.) */
  --color-on-dark: rgba(255, 253, 250, 0.94);
  --color-on-dark-muted: rgba(255, 253, 250, 0.32);

  /* Hero wash (slightly warmer than --color-surface) */
  --color-hero-warm-a96: rgba(255, 250, 242, 0.96);
  --color-hero-sand-a86: rgba(244, 235, 217, 0.86);
  --color-black-a20: rgba(0, 0, 0, 0.2);
  --color-black-a28: rgba(0, 0, 0, 0.28);

  /* About band (between sand and grey on the homepage about section) */
  --color-about-wash-start: #f7f5f2;
  --color-about-wash-end: #eceae6;

  /*
   * Breakpoints: use literals in @media only; do not use var() inside @media conditions.
   * Prefer mobile-first (min-width: 48rem) over paired max-width: 47.99rem queries.
   * Human names: --bp-sm 34rem · --bp-nav 40rem · --bp-md 48rem · --bp-lg 64rem
   */

  /* Elevation */
  --shadow-soft: 0 12px 28px var(--color-ink-a06);
  --shadow-card: 0 8px 22px var(--color-ink-a06);
  /* Lighter elevation for hover / subtle cards (homepage dentist-glasgow, solution cards) */
  --shadow-card-soft: 0 4px 16px var(--color-ink-a04);
  --shadow-header: 0 4px 16px var(--color-ink-a04);
  --shadow-dropdown: 0 8px 24px var(--color-ink-a08);
  --shadow-button-secondary: 0 6px 14px var(--color-ink-a06);
  --shadow-method-icon: 0 6px 16px var(--color-ink-a06);
  --shadow-primary: 0 8px 18px var(--color-gold-deep-a18);
  --shadow-primary-hover: 0 10px 22px var(--color-gold-deep-a24);
  --shadow-hero-image: 0 12px 32px var(--color-ink-a08);
  --shadow-hero-review: 0 6px 18px var(--color-ink-a04);
  --shadow-review-arrow-hover: 0 4px 12px var(--color-ink-a08);

  /* Focus rings */
  --focus-ring: 2px solid var(--color-ink-a14);
  --focus-ring-soft: 2px solid var(--color-ink-a12);

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5.25rem;
  /* Matches legacy .section padding; not on the 8px scale */
  --section-pad-y: 3.75rem;
  /* Hero bottom padding; no exact match on --space-* */
  --space-hero-pad-bottom: 4.5rem;
  --header-height-desktop: 6.4375rem;
  --header-height-mobile: 4.8125rem;
  --first-fold-header-offset: var(--header-height-desktop);
  --measure: 78rem;
  --measure-narrow: 42rem;
  /* Section intros: wider than body copy, narrower than .container */
  --section-intro-max: 52rem;
  --section-intro-wide-max: 68rem;
  /* Shared icon: gold-deep check stroke (single source for .checklist, .solution-check-badge, beliefs list) */
  --icon-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5' stroke='%23b87f2d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --font-body: "Satoshi", "Inter", sans-serif;
  --font-heading: "Satoshi", "Inter", sans-serif;
}

@media (max-width: 40rem) {
  :root {
    --first-fold-header-offset: var(--header-height-mobile);
  }
}