/* =========================================================
   SMART DENTAL NETIVOT — DESIGN TOKENS
   ========================================================= */

:root {
  /* ── Color Palette ──────────────────────────────────── */
  --teal:        #40A09D;   /* Primary brand */
  --teal-deep:   #1F4D4B;   /* Dark teal — headers, footer, dark sections */
  --teal-pale:   #EAF5F4;   /* Pale section background */
  --teal-light:  #DCEFEE;   /* Borders, dividers on pale bg */
  --cream:       #FBFAF7;   /* Main page background — warm, not cold white */
  --ink:         #1A2B2A;   /* Body text */
  --ink-soft:    #5C6F6E;   /* Muted text */
  --gold:        #D9A04B;   /* Single accent — badges, highlights, ratings */
  --gold-pale:   #FBF1E2;   /* Gold tint background */
  --white:       #FFFFFF;
  --line:        #E2E8E7;   /* Hairline borders */
  --success:     #3FA66B;
  --danger:      #D9685B;
  --wa:          #25D366;

  /* ── Typography ─────────────────────────────────────── */
  --font-display: 'Heebo', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Assistant', 'Segoe UI', Arial, sans-serif;

  /* Type scale (mobile-first, fluid via clamp) */
  --fs-h1: clamp(2rem, 6vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 4.4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 3.2vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 2.4vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 2.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* ── Spacing scale ──────────────────────────────────── */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;

  /* ── Layout ──────────────────────────────────────────── */
  --container: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 2px 10px rgba(31,77,75,0.06);
  --shadow-md: 0 8px 30px rgba(31,77,75,0.10);
  --shadow-lg: 0 20px 60px rgba(31,77,75,0.16);
  --shadow-gold: 0 8px 24px rgba(217,160,75,0.25);

  /* ── Transitions ─────────────────────────────────────── */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .18s;
  --t-med: .35s;
}

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