/* Token source — the ONLY file where raw values (hex, px, ms) may appear.
   Feature styles speak var(--token) exclusively; CI greps enforce it. */

:root {
  /* Spacing — 4px base scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radii — 28 is the signature big-surface radius (hero, preview card) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 20px;
  --radius-hero: 28px;
  --radius-pill: 999px;

  /* Type scale */
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-hero: 1.75rem;
  --font-stack: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* Colors — accent */
  --color-accent: #4f46e5;
  --color-accent-deep: #4338ca;
  --color-accent-bright: #7c3aed;
  --gradient-accent: linear-gradient(135deg, var(--color-accent-deep), var(--color-accent-bright));

  /* Colors — surfaces & text */
  --color-page: #f4f4fb;
  --color-surface: #ffffff;
  --color-ink: #1c1b2e;
  --color-ink-soft: #64627e;
  --color-on-accent: #ffffff;
  --color-on-accent-soft: rgba(255, 255, 255, 0.72);
  --color-on-accent-tint: rgba(255, 255, 255, 0.18);

  /* Colors — semantic */
  --color-danger: #dc2626;
  --color-danger-soft: rgba(220, 38, 38, 0.12);

  /* Opacity steps */
  --o10: 0.1;
  --o15: 0.15;
  --o70: 0.7;

  /* Shadows — layered (ambient + contact); accent glow takes the accent */
  --shadow-card: 0 1px 2px rgba(28, 27, 46, 0.06), 0 8px 24px rgba(28, 27, 46, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(28, 27, 46, 0.08), 0 14px 36px rgba(28, 27, 46, 0.14);
  --shadow-glow-accent: 0 12px 40px rgba(79, 70, 229, 0.35);
  --shadow-accent-hover: 0 2px 4px rgba(79, 70, 229, 0.18), 0 12px 32px rgba(79, 70, 229, 0.28);

  /* Motion */
  --anim-fast: 150ms;
  --anim-medium-fast: 200ms;
  --anim-medium: 250ms;
  --anim-slow: 300ms;
  --anim-x-slow: 500ms;
  --entrance-duration: 480ms;
  --entrance-step: 90ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* Layout */
  --page-max-width: 980px;
  --breakpoint-two-column: 700px; /* documented here; used in the media query below */

  /* Preview checkerboard (transparency hint) */
  --checker-tile: 14px;
  --color-checker: #e8e8f3;
}