/* ==========================================================================
   BETGARANTI — DESIGN TOKENS
   Brand: deep navy + clover green from the logo wordmark.
   ========================================================================== */

:root {
  --ink-950: #000810;
  --ink-900: #0a1e39;
  --ink-800: #0f2a4a;
  --ink-700: #163a5f;
  --ink-600: #1f4d75;
  --ink-500: #3a6a90;
  --ink-400: #6a92b0;
  --ink-300: #a8c4d6;

  --paper-100: #f7fbf4;
  --paper-200: #eef6e8;
  --paper-300: #d8e8cc;
  --paper-400: #b5cfa0;

  /* Primary accent — logo clover green */
  --accent-900: #1e4a0c;
  --accent-800: #2f6e12;
  --accent-700: #3f8c18;
  --accent-600: #489b18;
  --accent-500: #62ae29;
  --accent-450: #6fbf32;
  --accent-400: #8ed851;
  --accent-300: #a8e870;
  --accent-200: #c8f29a;
  --accent-100: #e8fbd0;

  --forest-900: #061018;
  --forest-700: #0c2238;
  --forest-500: #143552;
  --forest-400: #1f4a6e;
  --forest-300: #4a7a9a;

  --signal-600: #c45a12;
  --signal-500: #e87a28;
  --signal-300: #f5b078;

  --surface-base: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-inverse: var(--paper-200);
  --surface-border: rgba(142, 216, 81, 0.16);
  --surface-border-soft: rgba(142, 216, 81, 0.1);

  --text-primary: #f2f7fb;
  --text-secondary: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-inverse: var(--ink-950);
  --text-accent: var(--accent-400);
  --on-accent: #04120a;

  /* Typography — geometric display + soft body (distinct from KolayBet) */
  --font-display: 'Syne', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-display-1: clamp(3rem, 3vw + 1.8rem, 6.2rem);
  --fs-display-2: clamp(2.2rem, 2vw + 1.4rem, 4.4rem);
  --fs-h1: clamp(2.2rem, 2.2vw + 1.2rem, 4rem);
  --fs-h2: clamp(1.75rem, 1.4vw + 1.1rem, 2.9rem);
  --fs-h3: clamp(1.3rem, 0.6vw + 1rem, 1.75rem);
  --fs-h4: clamp(1.08rem, 0.25vw + 0.98rem, 1.3rem);
  --fs-lead: clamp(1.1rem, 0.35vw + 0.95rem, 1.35rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.76rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-mega: 0.16em;

  --space-3xs: 0.25rem;
  --space-2xs: 0.4rem;
  --space-xs: 0.6rem;
  --space-sm: 0.85rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --container-max: 72rem;
  --container-pad: clamp(1.1rem, 3.5vw, 2rem);

  --radius-sm: 0.55rem;
  --radius-md: 1rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2.4rem;
  --radius-pill: 999px;

  /* Soft leaf / clover cut */
  --clip-leaf: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  --clip-petal: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);

  --border-hair: 1px solid var(--surface-border);
  --shadow-soft: 0 18px 50px rgba(0, 8, 16, 0.45);
  --shadow-glow: 0 0 40px rgba(98, 174, 41, 0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  --header-h: 4.25rem;
  --announce-h: 2.1rem;
  --z-header: 40;
  --z-overlay: 50;
  --z-toast: 60;
}