/* ═══════════════════════════════════════════
   DR. NEAL SMOLLER (DNS) — DESIGN TOKENS
   Template: Woodstock Vitamins wv-2026 tokens
   Prefix: --dns-  ·  Source of truth: dns-tokens.json
   ═══════════════════════════════════════════ */

/* Fonts: Newsreader + Albert Sans are free Google Fonts, standing in for
   Gestura (SocioType) and Aeonik (CoType). Load them with:
   https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500&family=Albert+Sans:wght@400;500;600&display=swap
   General Grotesque Mono (same as WV) is self-hosted for small labels. */

:root {

  /* Palette */
  --dns-color-cream: #F8F5EC;                                    /* Cream (was WV background) */
  --dns-color-sage: #DDDEC7;                                     /* Surface sage */
  --dns-color-ink: #2A2B14;                                      /* Text primary */
  --dns-color-olive-gray: #555543;                               /* Text secondary / buttons / footer */
  --dns-color-gray: #D9D9D9;                                     /* Page background */
  --dns-color-white: #FFFFFF;
  --dns-color-blue-dark: #122830;                                /* Deep */
  --dns-color-blue-mid: #1A4A55;                                 /* Dusk */
  --dns-color-blue-accent: #286E7E;                              /* Horizon */
  --dns-color-blue-light: #65A8B5;                               /* Haze */
  --dns-color-blue-wash: #BDD9DE;                                /* Frost */
  --dns-color-olive: #939740;                                    /* Global accent */
  --dns-color-olive-dark: #767933;                               /* Global accent */
  --dns-color-badge: #9B8FB3;                                    /* Global accent (purple) */
  --dns-color-warning: #C3200B;                                  /* Warnings, error icons */

  /* Colors */
  --dns-color-background: var(--dns-color-gray);                 /* Page background (gray, per homepage mockup) */
  --dns-color-surface: var(--dns-color-sage);                    /* Card underlines, subtle fills */
  --dns-color-primary: var(--dns-color-olive-gray);              /* Primary buttons */
  --dns-color-primary-hover: var(--dns-color-ink);               /* Primary button hover */
  --dns-color-accent: var(--dns-color-blue-mid);                 /* Name pill, arrow */
  --dns-color-text-primary: var(--dns-color-ink);                /* Headlines, nav, body */
  --dns-color-text-secondary: var(--dns-color-olive-gray);       /* Supporting text */
  --dns-color-text-inverse: var(--dns-color-white);              /* Text on dark (footer, buttons) */
  --dns-color-text-link: var(--dns-color-ink);
  --dns-color-text-link-hover: var(--dns-color-blue-accent);
  --dns-color-badge-bg: var(--dns-color-blue-light);             /* "?" bubbles on question cards */
  --dns-color-badge-text: var(--dns-color-white);
  --dns-color-border: var(--dns-color-sage);
  --dns-color-mega-bg: var(--dns-color-sage);                    /* Mega menu */
  --dns-color-card-bg: var(--dns-color-white);                   /* Question cards */
  --dns-color-footer-bg: var(--dns-color-blue-dark);             /* Footer card (matches header) */
  --dns-color-header-bg: var(--dns-color-blue-dark);             /* Floating header bar */
  --dns-color-placeholder: var(--dns-color-gray);                /* Placeholder boxes */
  --dns-color-overlay: rgba(0, 0, 0, 0.5);

  /* Fonts */
  --dns-font-primary: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif; /* Body, headings, nav, buttons (free stand-in for Aeonik) */
  --dns-font-mono: 'General Grotesque Mono', monospace;          /* Labels */
  --dns-font-serif: 'Newsreader', Georgia, serif;                /* Display headlines (free stand-in for Gestura) */

  /* Font Sizes */
  --dns-text-xs: 11px;
  --dns-text-label: 12px;
  --dns-text-sm: 15px;
  --dns-text-base: 16px;
  --dns-text-md: 18px;
  --dns-text-button: 17px;                                       /* Button labels (sans, medium) */
  --dns-text-lg: 21px;
  --dns-text-xl: 27px;
  --dns-text-display: 88px;                                      /* Hero headline at full width (scales down with the screen) */

  /* Font Weights */
  --dns-weight-light: 400;                                       /* Body copy weight (Albert Sans Regular) */
  --dns-weight-book: 360;                                        /* Display headlines (Newsreader variable weight) */
  --dns-weight-regular: 400;
  --dns-weight-medium: 500;
  --dns-weight-semibold: 600;
  --dns-weight-bold: 700;

  /* Layout */
  --dns-header-height: 81px;
  --dns-header-padding: 80px;
  --dns-container-max: 1440px;
  --dns-content-max: 768px;

  /* Border Radius */
  --dns-radius-sm: 15px;
  --dns-radius-md: 16px;
  --dns-radius-lg: 20px;                                         /* Question cards */
  --dns-radius-button: 10px;                                     /* Buttons */
  --dns-radius-nav: 16px;                                        /* Floating header bar */
  --dns-radius-pill: 999px;                                      /* Tags, toggles */

  /* Shadows */
  --dns-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.08);
  --dns-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --dns-transition-fast: 150ms ease;
  --dns-transition-base: 200ms ease;
  --dns-transition-slow: 300ms ease;
  --dns-transition-color: color 200ms ease, background-color 200ms ease;

  /* Line Heights */
  --dns-leading-display: 0.92;                                   /* Display headlines */
  --dns-leading-tight: 1.0;                                      /* Headings */
  --dns-leading-normal: 1.52;                                    /* Body text */
  --dns-leading-loose: 1.8;                                      /* Small body, descriptions */

  /* Letter Spacing */
  --dns-tracking-display: -0.025em;                              /* Serif display headlines */
  --dns-tracking-tight: -0.03em;                                 /* Wordmarks, tight headings */
  --dns-tracking-normal: 0em;
  --dns-tracking-wide: 0.14em;                                   /* Eyebrow labels, "HOLISTIC PHARMACIST" */

  /* Gradients */
  --dns-gradient-soft: radial-gradient(42% 52% at 84% 30%, rgba(101,168,181,.95) 0%, rgba(101,168,181,0) 72%), radial-gradient(46% 50% at 46% 62%, rgba(189,217,222,.75) 0%, rgba(189,217,222,0) 70%), radial-gradient(36% 44% at 60% 96%, rgba(40,110,126,.45) 0%, rgba(40,110,126,0) 70%), radial-gradient(40% 46% at 96% 82%, rgba(189,217,222,1) 0%, rgba(189,217,222,0) 70%), radial-gradient(34% 42% at 6% 98%, rgba(221,222,199,1) 0%, rgba(221,222,199,0) 72%), radial-gradient(44% 46% at 16% 6%, rgba(248,245,236,.95) 0%, rgba(248,245,236,0) 72%), #D9D9D9; /* Hero + footer backdrop (Haze/Frost/Horizon over gray, with cream and sage corners) */
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY CLASSES
   ═══════════════════════════════════════════ */

/* Display headline — Newsreader Book. Wrap emphasis words in <em> for the italic ("reality check"). */
.dns-display {
  font-family: var(--dns-font-serif);
  font-weight: var(--dns-weight-book);
  font-size: var(--dns-text-display);
  line-height: var(--dns-leading-display);
  letter-spacing: var(--dns-tracking-display);
  font-variation-settings: "opsz" 72;
  color: var(--dns-color-text-primary);
}
.dns-display em { font-style: italic; font-weight: var(--dns-weight-regular); }

/* Section headline (serif): "Dr. Neal Insights", "Confused by wellness?" */
.dns-h1 {
  font-family: var(--dns-font-serif);
  font-weight: var(--dns-weight-book);
  font-size: 72px;
  line-height: var(--dns-leading-display);
  letter-spacing: var(--dns-tracking-display);
  font-variation-settings: "opsz" 72;
  color: var(--dns-color-text-primary);
}
.dns-h1 em { font-style: italic; font-weight: var(--dns-weight-regular); }

/* Section headline (sans): "What people are saying" */
.dns-h2 {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-regular);
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dns-color-text-primary);
}

/* Card / article title */
.dns-h3 {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-regular);
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--dns-color-text-primary);
}

/* Footer column headings, stat titles */
.dns-h6 {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-semibold);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dns-color-text-primary);
}

/* Button labels */
.dns-btn-label {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-medium);
  font-size: var(--dns-text-button);
  letter-spacing: 0;
}

.dns-eyebrow {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-regular);
  font-size: var(--dns-text-label);
  line-height: 1.4;
  letter-spacing: var(--dns-tracking-wide);
  text-transform: uppercase;
  color: var(--dns-color-text-secondary);
}

.dns-body-lg {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-light);
  font-size: 19px;
  line-height: 1.55;
  color: var(--dns-color-text-primary);
}

.dns-body {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-light);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dns-color-text-secondary);
}

.dns-body-sm {
  font-family: var(--dns-font-primary);
  font-weight: var(--dns-weight-light);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dns-color-text-secondary);
}

.dns-label {
  font-family: var(--dns-font-mono);
  font-weight: var(--dns-weight-regular);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dns-color-text-secondary);
}