/* ============================================================
   variables.css — Design tokens for AI Surfers RU
   ============================================================ */

:root {
  /* ── Colors ──────────────────────────────────────────────── */
  --color-cream:       #F2F0E9;
  --color-navy:        #0A1628;
  --color-navy-light:  #0A2342;
  --color-teal:        #2CA58D;
  --color-teal-light:  #5FBFAD;
  --color-teal-on-cream: #1A8A72; /* darker teal for WCAG AA on cream (~4.5:1) */
  --color-white:       #FFFFFF;

  /* Text */
  --text-on-cream:     #0A2342;
  --text-on-navy:      #FFFFFF;
  --text-muted-cream:  #4A5568;
  --text-muted-navy:   rgba(255, 255, 255, 0.65);

  /* Glassmorphism */
  --glass-bg:          rgba(255, 255, 255, 0.04);
  --glass-border:      1px solid rgba(255, 255, 255, 0.08);
  --glass-radius:      16px;

  --glass-nav-bg:      rgba(10, 22, 40, 0.72);
  --glass-nav-border:  rgba(255, 255, 255, 0.06);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:  'Unbounded', sans-serif;
  --font-body:     'Onest', sans-serif;

  /* Scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  5rem;      /* 80px */

  /* Marquee size */
  --text-marquee: clamp(2.25rem, 5vw, 4rem);  /* 36–64px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* ── Spacing ─────────────────────────────────────────────── */
  --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-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Section vertical padding */
  --section-pad-y: clamp(4rem, 8vw, 8rem);

  /* Max content width */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ── Borders & Radii ─────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-teal: 0 0 40px rgba(44, 165, 141, 0.25);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-xslow:  800ms;

  /* ── Z-index layers ──────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}