/* ==========================================================================
   DN Detector — Design Tokens
   Load FIRST, before every other stylesheet.

   Phase 2 rule: token VALUES for existing variables are copied byte-for-byte
   from site.css, so adopting this file changes nothing visually. New tokens
   (spacing scale, type scale, band colours) are additive and unused until a
   component is deliberately migrated.

   Where site.css and premium.css disagreed, the value that ACTUALLY RENDERS
   is the one recorded here — premium.css wins its conflicts via !important.
   ========================================================================== */

/* ── Light (default) ─────────────────────────────────────────────────────── */
:root,
html,
html[data-theme="light"] {
  /* Surfaces */
  --dd-bg: #FBFCFE;
  --dd-surface: #FFFFFF;
  --dd-surface-hover: #F5F7FB;
  --dd-surface-elevated: #F5F7FB;
  --dd-surface-2: #F5F7FB;
  --dd-border: #E6EAF2;
  --dd-border-strong: #D2D9E6;          /* NEW — emphasised dividers */

  /* Brand */
  --dd-primary: #2563EB;
  --dd-primary-hover: #1D4FD7;
  --dd-primary-soft: rgba(37, 99, 235, 0.08);
  --dd-accent: #7C3AED;
  --dd-accent-violet: #7C3AED;
  --dd-accent-text: #1D4ED8;
  --dd-accent-gradient: linear-gradient(90deg, #2563EB, #7C3AED);
  --dd-link: #2563EB;
  --dd-on-primary: #FFFFFF;

  /* Dark conversion band (closing CTA) — NEW */
  --dd-band-bg: #0A192F;
  --dd-band-bg-2: #0B1B33;
  --dd-band-text: #F4F6FA;
  --dd-band-muted: #9AA3B2;

  /* Text */
  --dd-foreground: #0B1020;
  --dd-text-secondary: #5B6472;
  --dd-muted: #5B6472;
  --dd-banner-text: #0B1020;

  /* Status */
  --dd-success: #16A34A;
  --dd-success-soft: rgba(22, 163, 74, 0.08);
  --dd-warning: #D97706;
  --dd-danger: #DC2626;
  --dd-danger-soft: rgba(220, 38, 38, 0.06);

  /* Elevation */
  --dd-card-shadow: 0 1px 2px rgba(11, 13, 18, 0.06);
  --dd-elevation-1: 0 1px 2px rgba(11, 13, 18, 0.06);
  --dd-elevation-2: 0 4px 16px rgba(11, 13, 18, 0.08);
  --dd-elevation-3: 0 12px 32px rgba(11, 13, 18, 0.10);   /* NEW */
  --dd-elevation-inset: none;

  /* Radius */
  --dd-radius-sm: 8px;
  --dd-radius: 12px;
  --dd-radius-btn: 10px;
  --dd-radius-card: 14px;
  --dd-radius-lg: 16px;
  --dd-radius-xl: 16px;
  --dd-radius-pill: 999px;              /* NEW */

  /* Type — existing tokens, unchanged */
  --dd-font-hero: clamp(2.4rem, 5vw, 4rem);
  --dd-font-section: clamp(1.6rem, 3vw, 2.25rem);
  --dd-font-card: 1.125rem;
  --dd-font-body: 1rem;
  --dd-line-body: 1.7;

  /* Type scale — NEW. Adopted per component during migration, never globally. */
  --dd-text-display: clamp(2.4rem, 1.7rem + 2.6vw, 3.5rem);
  --dd-text-h2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --dd-text-h3: 1.25rem;
  --dd-text-h4: 1.125rem;
  --dd-text-lead: 1.125rem;
  --dd-text-body: 1rem;
  --dd-text-body-s: 0.9375rem;
  --dd-text-caption: 0.8125rem;
  --dd-text-label: 0.75rem;

  --dd-lh-display: 1.10;
  --dd-lh-h2: 1.20;
  --dd-lh-h3: 1.35;
  --dd-lh-body: 1.7;
  --dd-lh-tight: 1.5;

  --dd-track-display: -0.02em;
  --dd-track-h2: -0.025em;
  --dd-track-label: 0.08em;

  --dd-weight-body: 400;
  --dd-weight-medium: 500;
  --dd-weight-semi: 600;
  --dd-weight-bold: 700;

  /* Spacing — NEW, 4px base. Existing ad-hoc values are mapped during migration. */
  --dd-space-1: 0.25rem;
  --dd-space-2: 0.5rem;
  --dd-space-3: 0.75rem;
  --dd-space-4: 1rem;
  --dd-space-5: 1.5rem;
  --dd-space-6: 2rem;
  --dd-space-7: 3rem;
  --dd-space-8: 4rem;
  --dd-space-9: 6rem;
  --dd-space-10: 7.5rem;

  /* Semantic spacing — existing tokens, unchanged */
  --dd-section-pad: clamp(3.5rem, 7vw, 5.5rem);
  --dd-grid-gap: 1.25rem;
  --dd-card-pad: var(--dd-space-5);
  --dd-container: 1240px;

  /* Motion — NEW */
  --dd-dur-fast: 150ms;
  --dd-dur-mid: 250ms;
  --dd-dur-slow: 400ms;
  --dd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Ad reservations — consumed by the ad system */
  --dd-ad-reserve: 90px;

  color-scheme: light;
}

/* ── Dark ────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --dd-bg: #0B0D12;
  --dd-surface: #141826;
  --dd-surface-hover: #1B1F2A;
  --dd-surface-elevated: #1B1F2A;
  --dd-surface-2: #1B1F2A;
  --dd-border: #232A3A;
  --dd-border-strong: #2E3750;

  --dd-primary: #2563EB;
  --dd-primary-hover: #1D4FD7;
  --dd-primary-soft: rgba(37, 99, 235, 0.12);
  --dd-accent: #38BDF8;
  --dd-accent-violet: #7C3AED;
  --dd-accent-text: #93C5FD;
  --dd-link: #60A5FA;

  --dd-band-bg: #0A1020;
  --dd-band-bg-2: #0D1526;
  --dd-band-text: #F4F6FA;
  --dd-band-muted: #94A0B4;

  --dd-foreground: #F4F6FA;
  --dd-text-secondary: #9AA3B2;
  --dd-muted: #9AA3B2;
  --dd-banner-text: #F4F6FA;

  --dd-success: #22C55E;
  --dd-success-soft: rgba(34, 197, 94, 0.1);
  --dd-warning: #F59E0B;
  --dd-danger: #EF4444;
  --dd-danger-soft: rgba(239, 68, 68, 0.1);

  --dd-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  --dd-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --dd-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.24);
  --dd-elevation-3: 0 12px 32px rgba(0, 0, 0, 0.32);
  --dd-elevation-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

/* ── Breakpoint reference (documentation only — CSS has no breakpoint vars) ──
   sm 480  · md 640  · lg 768  · xl 1024 · 2xl 1280
   These five are the ONLY breakpoints in use. Do not add more.
   ─────────────────────────────────────────────────────────────────────────── */