/* ═══════════════════════════════════════════════════════
   Dentlink v16 Design Tokens (SSoT)

   ALL design values live here. Change font, color,
   spacing, or rhythm ONLY in this file.
   Every page, component, and template inherits from these.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-serif: 'Libre Baskerville', serif;
  --font-sans: 'Inter', sans-serif;
  --heading-weight: 700;
  --display-weight: 400;
  --h1: clamp(2.2rem, 7vw, 5rem);
  --h2: clamp(1.75rem, 5vw, 3.5rem);
  --h3: clamp(1.4rem, 3.5vw, 2.4rem);

  /* ── Colors ── */
  --purple: #8D6EFF;
  --purple-soft: #B8A2FF;
  --purple-bg: #F7F4FF;
  --purple-10: rgba(141, 110, 255, .10);
  --purple-20: rgba(141, 110, 255, .20);
  --purple-deep: #4D34A8;
  --dark: #1c1632;
  --dark-card: #0a0a0f;
  --heading: #1A1A1A;
  --body: #6B7280;
  --body-light: #9CA3AF;
  --bg: #FFFFFF;
  --bg-alt: #FAFAFA;
  --border: #E5E7EB;
  --green: #34D399;

  /* ── Layout ── */
  --mw: 1200px;
  --pad-x: clamp(20px, 4vw, 48px);
  --pad-x-tight: clamp(16px, 3vw, 32px);
  --pad-x-wide: clamp(24px, 5vw, 64px);

  /* ── Vertical Rhythm (absolute rules) ── */
  --section-y: clamp(56px, 9vw, 140px);
  --section-y-tight: clamp(40px, 6vw, 80px);
  --gap-heading-sub: clamp(12px, 1.5vw, 20px);
  --gap-sub-content: clamp(32px, 5vw, 56px);
  --gap-items: clamp(16px, 2.5vw, 24px);

  /* ── Spacing scale ── */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ── Radius ── */
  --r: 30px;
  --r-sm: 16px;
  --r-xs: 10px;
  --radius-2xl: 30px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* ── Motion ── */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --tr: .3s var(--ease);

  /* ── Legacy aliases (used in mega menus, will phase out) ── */
  --spy: clamp(80px, 10vw, 140px);
}
/* v16 Phase 2.5 deployed */