/**
 * tokens.css — CSS Custom Properties for the v2 Public Site
 *
 * Single source of truth for all design tokens used across all 7 public pages.
 * Merged from: landing.html, platform.html, demo.html, pricing.html,
 *              blog.html, blog-detail.html, newsletter.html
 *
 * Do NOT add page-specific or component-specific rules here.
 * Do NOT override these in page CSS — use higher-specificity selectors if needed.
 */

:root {
  /* ─── Brand Colors ──────────────────────────────────── */
  --navy: #232c5b; /* Primary brand. Buttons, headings, accents. */
  --navy-dark: #141c40; /* Dark hero backgrounds, footer CTAs. */
  --navy-hover: #1a2248; /* Button hover state. */
  --navy-light: #c6cadc; /* Step watermarks, inactive dots, dividers. */

  /* ─── Accent / Semantic Colors ─────────────────────── */
  --accent: #3849a5; /* Secondary accent for pills, icons, links. */
  --accent-bg: rgba(56, 73, 165, 0.12); /* Accent pill/badge background. */
  --green: #10b981; /* Success states, checkmarks. */
  --yellow: #eab308; /* Warning indicators. */
  --red: #ef4444; /* Error states (alias of --error). */
  --error: #ef4444; /* Form validation errors. */

  /* ─── Backgrounds ───────────────────────────────────── */
  --bg-page: #e8e8e8; /* Main page background (gray). */
  --bg-hero: #f0f3f4; /* Hero, alternate section backgrounds. */
  --bg-card: #ffffff; /* Card surfaces, form cards. */
  --bg-dark: #141414; /* Screenshot containers, dark sections. */
  --bg-alt: #f0f3f4; /* Alternate section background (same as hero). */
  --bg-footer-section: #f3f3f3; /* FAQ, CTA, lighter footer sections. */

  /* ─── Text ──────────────────────────────────────────── */
  --text-primary: #232c5b; /* Headlines, primary body text. */
  --text-dark: #222222; /* Navigation links, section labels. */
  --text-secondary: #737373; /* Supporting text, descriptions. */
  --text-muted: #525252; /* Placeholder text, captions. */

  /* ─── Typography ────────────────────────────────────── */
  --font-display: "Questrial", sans-serif; /* Hero headings, large section titles. */
  --font-heading: "Satoshi", sans-serif; /* Card titles, stat values, subheadings. */
  --font-body: "DM Sans", sans-serif; /* All body text, nav, buttons, forms. */
  --font-quote: "Quattrocento Sans", sans-serif; /* Decorative quotation marks. */
  --font-mono: "JetBrains Mono", monospace; /* Code blocks, API references. */

  /* ─── Layout ────────────────────────────────────────── */
  --max-width: 1360px;
  --page-padding: 40px;

  /* ─── Transitions ───────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
  :root {
    --page-padding: 24px;
  }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  :root {
    --page-padding: 16px;
  }
}