/* Omoway — Design Tokens
   Extracted from the landing-page mockup. Colors/sizes are close estimates —
   verify the values marked "verify" in DESIGN-SPEC.md against the source file. */

:root {
  /* ---- Color ---- */
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f5f7;
  --color-bg-muted: #ededf0;
  --color-purple: #4b2e9e;        /* verify */
  --color-purple-dark: #2e1c63;   /* verify */
  --color-purple-soft: #efeafb;
  --color-accent: #d6f84c;        /* verify */
  --color-accent-ink: #1a1a1a;
  --color-text: #141414;
  --color-ink: #241a5e;           /* deep indigo — hero headings (verify) */
  --color-text-muted: #6b6b72;
  --color-text-invert: #ffffff;
  --color-border: #e6e6ea;
  --color-success: #2fb57a;

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5vw, 4rem);   /* hero H1 ~40-64px */
  --fs-h2: clamp(2rem, 3.5vw, 3rem);        /* section H2 ~32-48px */
  --fs-h3: 1.375rem;                        /* card H3 ~22px */
  --fs-body-lg: 1.125rem;                   /* 18px */
  --fs-body: 1rem;                          /* 16px */
  --fs-small: 0.875rem;                     /* 14px */
  --fs-stat: clamp(2rem, 3vw, 2.75rem);     /* stat number */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.55;

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

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: clamp(24px, 5vw, 80px);
  --section-pad-y: clamp(64px, 10vw, 128px);
  --grid-gap: 24px;

  /* ---- Radii ---- */
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card: 0 8px 30px rgba(20, 20, 40, 0.06);
  --shadow-float: 0 16px 40px rgba(20, 20, 40, 0.10);
}