/* ═══════════════════════════════════════════════════════════════
   tokens.css — Design System Tokens
   Womenmatic Landing Page
   Single source of truth for all design decisions.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-sans: "Lato", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  /* ── Font sizes ── */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* ── Colors ── */
  /* Brand green */
  --color-green: #50705a;
  --color-green-dark: #3a5244;

  /* CTA / accent (mauve-terra) */
  --color-terra: #ae8785;
  --color-terra-hover: #9d756e;

  /* Gold accent */
  --color-gold: #c9a96e;

  /* Neutrals */
  --color-white: #ffffff;
  --color-cream: #f8f5f0;
  --color-cream-dark: #f0ece7;
  --color-border: #e0dbd4;

  /* Text */
  --color-text: #303030;
  --color-text-light: #6b6b6b;
  --color-text-muted: #9b9b9b;

  /* ── Spacing (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border radius ── */
  --radius: 5px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Border widths ── */
  --border-width: 1px; /* standard divider */
  --border-width-accent: 3px; /* left-border step/card accent */

  /* ── Shadows ── */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.13);

  /* ── Transitions ── */
  --t-fast: 0.12s ease;
  --t: 0.22s ease;
  --t-slow: 0.4s ease;

  /* ── Layout ── */
  --max-width: 1290px;

  /* ── Component-specific tokens ── */
  --cycle-hub-size: 120px;
}