/* ==========================================================================
   DRJB SMILE CLINIC — DESIGN TOKENS
   Single source of truth for colour, type, spacing across every page.
   Two-voice system: Ataraxia (calm, the door) vs Deep (real John, inside).
   ========================================================================== */

:root {
  /* ---- Colour: Ataraxia (trust/calm — used at the door, homepage hero) ---- */
  --ink: #1B2B3A;          /* deep blue-grey, trust */
  --ink-soft: #5A5F66;     /* secondary text on calm surfaces */
  --paper: #FAFAF7;        /* near-white warm paper */
  --paper-tint: #F4F1EC;   /* slightly deeper paper for hero gradients */
  --line: #E4E2D9;         /* hairline borders on calm surfaces */
  --accent-warmth: #B0879A;     /* soft dusty pink — warmth accent */
  --accent-warmth-deep: #7A5A68; /* darker pink for text-on-pink contexts */
  --accent-trust: #3A5A78;      /* mid-blue, for links/CTAs on calm surfaces */

  /* ---- Colour: Deep / real-John voice (bios, blog, referrals, GDP pages) ---- */
  --deep-bg: #FFFFFF;
  --deep-text: #16140F;
  --deep-text-soft: #5b5848;
  --deep-line: #D8D4C5;
  --deep-accent: #0F4D3E;       /* clinical teal — used sparingly, GDP/endo cues */
  --deep-accent-warn: #A8551E;  /* terracotta — diagnostic/finding annotations only */

  /* ---- Semantic aliases (so pages don't hardcode raw values) ---- */
  --bg-calm: var(--paper);
  --bg-calm-tint: var(--paper-tint);
  --text-calm: var(--ink);
  --text-calm-soft: var(--ink-soft);

  --bg-deep: var(--deep-bg);
  --text-deep: var(--deep-text);
  --text-deep-soft: var(--deep-text-soft);

  /* ---- Type ---- */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Courier New', monospace;

  --fs-h1: clamp(28px, 4vw, 44px);
  --fs-h2: clamp(22px, 3vw, 30px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.25;
  --lh-body: 1.7;

  /* ---- Spacing scale ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 96px;

  /* ---- Layout ---- */
  --max-width: 1180px;
  --max-width-text: 680px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}