/* =============================================
   Design tokens — light theme
   Ported from ads.zbang.ai app.css to unify the
   marketing site and the audit product under a
   single brand system.
   ============================================= */

:root {
  /* ── Surfaces ─────────────────────────────── */
  --bg: #F6F6F7;                /* page canvas */
  --paper: #FFFFFF;             /* cards, panels */
  --surface-alt: rgba(0, 0, 0, 0.02);
  --surface-raised: rgba(0, 0, 0, 0.04);

  /* ── Ink (text) ───────────────────────────── */
  --ink: #0B0B0F;               /* primary text */
  --ink-strong: #000000;        /* headings, emphasis */
  --ink-secondary: #43434B;     /* body text */
  --muted: #6B6B78;             /* meta, labels */

  /* ── Brand ────────────────────────────────── */
  --accent: #2A6DF4;            /* primary blue */
  --accent-hover: #1D57CE;      /* hover state */
  --accent-soft: rgba(42, 109, 244, 0.10);

  /* ── Status ───────────────────────────────── */
  --warm: #B25E00;
  --warm-soft: rgba(178, 94, 0, 0.10);
  --danger: #D13030;
  --danger-soft: rgba(209, 48, 48, 0.08);
  --success: #0E8A4A;
  --success-soft: rgba(14, 138, 74, 0.08);

  /* Status — full trio per category */
  --status-danger-bg: rgba(209, 48, 48, 0.06);
  --status-danger-border: rgba(209, 48, 48, 0.22);
  --status-danger-ink: #B21E1E;
  --status-warn-bg: rgba(178, 94, 0, 0.07);
  --status-warn-border: rgba(178, 94, 0, 0.22);
  --status-warn-ink: #8C4A00;
  --status-success-bg: rgba(14, 138, 74, 0.07);
  --status-success-border: rgba(14, 138, 74, 0.22);
  --status-success-ink: #0E6A3C;
  --status-info-bg: rgba(42, 109, 244, 0.06);
  --status-info-border: rgba(42, 109, 244, 0.22);
  --status-info-ink: #1D57CE;

  /* ── Lines ────────────────────────────────── */
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --shadow-color: rgba(15, 15, 20, 0.06);

  /* ── Lift overlays (neutral tints) ────────── */
  --lift-soft: rgb(0 0 0 / 2%);
  --lift-low:  rgb(0 0 0 / 4%);
  --lift-mid:  rgb(0 0 0 / 6%);
  --lift-high: rgb(0 0 0 / 9%);

  /* ── Top bar ──────────────────────────────── */
  --topbar: rgba(255, 255, 255, 0.92);
  --topbar-line: rgba(0, 0, 0, 0.08);
  --topbar-bg-1: rgba(255, 255, 255, 0.98);
  --topbar-bg-2: rgba(255, 255, 255, 0.96);

  /* ── Spacing scale ────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radii ────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 980px;

  /* ── Typography scale (uses clamp for fluid) ─ */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: clamp(20px, 2.2vw, 24px);
  --font-size-2xl: clamp(24px, 3vw, 32px);
  --font-size-3xl: clamp(32px, 4vw, 44px);
  --font-size-hero: clamp(40px, 6vw, 72px);

  --font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "DM Sans", "Helvetica Neue", sans-serif;

  /* ── Motion ───────────────────────────────── */
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}