/* ═══════════════════════════════════════════════════════
   TOKENS.CSS — Design Tokens | Stitch "Clinical Editorial"
   Pathnostics Homepage Redesign v2
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ──────────────────────────────────── */
  --color-purple:      #39378f;
  --color-purple-mid:  #5554ad;
  --color-coral:       #e82065;
  --color-coral-dark:  #b8004b;
  --color-green:       #00ae81;
  --color-green-dark:  #00694d;
  --color-sky:         #8fcaeb;
  --color-slate:       #637b83;
  --color-lime:        #b6cd2f;
  --color-navy-deep:   #1B2A4A;

  /* ── Tonal Surface System (Stitch Layering) ────────── */
  --surface:                 #f6f9ff;
  --surface-bright:          #f6f9ff;
  --surface-dim:             #d6dae1;
  --surface-container-lowest: #ffffff;
  --surface-container-low:   #f0f4fa;
  --surface-container:       #eaeef5;
  --surface-container-high:  #e4e8ef;
  --surface-container-highest: #dfe3e9;

  /* ── Semantic Roles ────────────────────────────────── */
  --color-primary:      var(--color-purple);
  --color-cta:          var(--color-coral);
  --color-proof:        var(--color-green);
  --color-accent:       var(--color-sky);
  --on-surface:         #171c21;
  --on-surface-variant:  #5b3f44;
  --color-text-body:    #171c21;
  --color-text-light:   #5b3f44;
  --color-bg:           #f6f9ff;
  --color-bg-off:       #f7f8fa;
  --color-bg-section:   #f0f4fa;
  --color-navy:         #1e1e3a;

  /* ── Font Stacks ───────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── Type Scale (fluid) ────────────────────────────── */
  --text-hero:     clamp(52px, 7vw, 96px);
  --text-h1:       clamp(40px, 5vw, 72px);
  --text-h2:       clamp(28px, 4vw, 60px);
  --text-h3:       clamp(20px, 2.5vw, 36px);
  --text-overline: 12px;
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-sm:       14px;
  --text-xs:       12px;

  /* ── Line Heights ──────────────────────────────────── */
  --leading-tight:    1.0;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* ── Letter Spacing ────────────────────────────────── */
  --tracking-tight:   -0.04em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.16em;

  /* ── Spacing ───────────────────────────────────────── */
  --section-padding-y: clamp(80px, 10vw, 128px);
  --section-padding-x: clamp(24px, 5vw, 64px);
  --content-max-width: 1152px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --gap-2xl: 64px;
  --gap-3xl: 96px;

  /* ── Glassmorphism ─────────────────────────────────── */
  --glass-bg:       rgba(255, 255, 255, 0.6);
  --glass-blur:     blur(20px);
  --glass-border:   1px solid rgba(255, 255, 255, 0.2);
  --glass-bg-dark:  rgba(255, 255, 255, 0.1);
  --glass-blur-sm:  blur(6px);

  /* ── Cinematic Shadows (purple-tinted) ─────────────── */
  --shadow-cinematic:      0 40px 100px -20px rgba(57, 55, 143, 0.12);
  --shadow-cinematic-sm:   0 20px 40px rgba(57, 55, 143, 0.06);
  --shadow-cinematic-lg:   0 60px 120px -30px rgba(57, 55, 143, 0.16);
  --shadow-nav:            0 1px 2px rgba(0, 0, 0, 0.05);

  /* ── Radii ─────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  48px;
  --radius-full: 9999px;

  /* ── Bokeh Backgrounds ─────────────────────────────── */
  --bokeh-bg:
    radial-gradient(circle at 20% 30%, rgba(232, 32, 101, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(57, 55, 143, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(143, 202, 235, 0.05) 0%, transparent 60%);

  --mesh-gradient:
    linear-gradient(120deg, #f6f9ff 0%, #fdf2f8 50%, #f1f0ff 100%);

  /* ── Gradient Accents ──────────────────────────────── */
  --gradient-brand: linear-gradient(90deg, #39378f, #e82065, #00ae81, #b6cd2f);
  --gradient-coral-purple: linear-gradient(90deg, #e82065, #39378f);
  --gradient-coral-green: linear-gradient(90deg, #e82065, #00ae81);
}