/* Clutch promo site — design tokens.
   Single source of the visual language for the standalone promo page.
   Mirrors the app's dark theme so screenshots sit naturally on the page. */

:root {
  /* Surfaces */
  --bg-0: #070b12;
  --bg-1: #0b111b;
  --bg-2: #101725;
  --bg-3: #161f2f;
  --bg-inset: #090e17;

  /* Lines */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);

  /* Text */
  --text-1: #e8edf6;
  --text-2: #a9b5c7;
  --text-3: #6c7a90;

  /* Accents */
  --accent: #4c8dff;
  --accent-2: #7ab0ff;
  --accent-ink: #04101f;
  --gold: #d9a760;
  --coral: #ff7a6b;
  --good: #5ec48a;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.8125rem; /* 13 */
  --step-0: 0.9375rem;  /* 15 */
  --step-1: 1.0625rem;  /* 17 */
  --step-2: 1.375rem;   /* 22 */
  --step-3: 1.75rem;    /* 28 */
  --step-4: 2.375rem;   /* 38 */
  --step-5: 3.5rem;     /* 56 */

  /* Space (4px rhythm) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Radius, shadow */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Layout */
  --page-max: 1200px;
  --content-max: 1120px;
  --nav-h: 64px;

  /* Motion — respects prefers-reduced-motion in styles.css */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}