/**
 * Retoma — Conversion Theme A (inspired by conversion architecture research;
 * Retoma brand colors, NOT a ClickFunnels clone).
 *
 * Semantic tokens only. Prefer these over raw hex in marketing pages.
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --surface-brand-950: #070e1a;
  --surface-brand-900: #0b1628;
  --surface-brand-800: #132238;
  --surface: #ffffff;
  --surface-subtle: #f4f6f9;
  --surface-warm: #fffaf5;

  /* Text */
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-inverse: #ffffff;
  --text-inverse-muted: rgba(255, 255, 255, 0.72);
  --text-accent: #fdba74;

  /* Action */
  --action-primary: #e85d04;
  --action-primary-hover: #c2410c;
  --action-on-primary: #ffffff;
  --accent-warm: #f4a261;
  --accent-cool: #7dd3fc;

  /* Borders / lines */
  --border-subtle: #e4e7ec;
  --border-on-brand: rgba(255, 255, 255, 0.12);

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Layout */
  --container-lg: 70rem; /* 1120 */
  --container-xl: 80rem;
  --section-y: clamp(3.5rem, 8vw, 5.5rem);

  /* Type */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-display: Syne, "DM Sans", sans-serif;
  --font-h1: clamp(2rem, 5.5vw, 3.25rem);
  --font-h2: clamp(1.75rem, 4vw, 2.5rem);
  --font-lead: clamp(1.0625rem, 1.6vw, 1.125rem);
  --font-body: 1rem;
  --font-action: 0.9375rem;

  /* Elevation */
  --shadow-elevated: 0 1.25rem 3rem rgba(11, 22, 40, 0.14);
  --shadow-brand: 0 1rem 2.5rem rgba(232, 93, 4, 0.28);

  /* Conversion policy (documented for authors; used by data attributes) */
  --cta-frequency: medium; /* low | medium | high */

  /* Legacy aliases used by existing pages */
  --navy: var(--surface-brand-900);
  --navy-2: var(--surface-brand-800);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --paper: var(--surface-subtle);
  --line: var(--border-subtle);
  --orange: var(--action-primary);
  --orange-deep: var(--action-primary-hover);
  --gold: var(--accent-warm);
  --sky: var(--accent-cool);
  --radius: var(--radius-sm);
  --max: 1120px;
}