/* Design system JuicySuzi - tokeny (spec runda 2, sekcja 5) */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-pink: #FF3CAC;
  --color-pink-electric: #F04CCF;
  --color-purple: #D536C0;
  --gradient-brand: linear-gradient(135deg, #F04CCF 0%, #D536C0 100%);

  --color-bg: #090911;
  --color-bg-alt: #11101A;
  --color-surface: #191522;
  --color-surface-hover: #241B2E;
  --color-border: #35283F;

  --color-text: #FAF7FC;
  --color-text-muted: #BDB4C8;
  --color-text-on-brand: #090911;

  --color-live: #38D992;
  --color-warning: #F4BC68;
  --color-error: #FF667C;
  --color-disabled: #77707F;

  --color-pink-soft: rgba(255, 60, 172, 0.12);
  --color-pink-border: rgba(255, 60, 172, 0.32);
  --color-overlay: rgba(9, 9, 17, 0.82);

  --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;

  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 999px;

  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.22);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.32);
  --shadow-pink: 0 0 28px rgba(255, 60, 172, 0.22);
  --shadow-menu: 0 -8px 32px rgba(0, 0, 0, 0.35);

  --font-main: "Space Grotesk", Arial, sans-serif;
  --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px;
  --font-size-h3: 21px; --font-size-h2: 28px; --font-size-h1: 36px;
  --line-height-tight: 1.15; --line-height-heading: 1.2; --line-height-body: 1.55;

  --container-max: 1184px;
  --page-gutter: 16px;

  --button-height: 50px; --button-height-sm: 44px;
  --mobile-header-height: 56px; --desktop-header-height: 72px; --bottom-nav-height: 68px;

  --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --z-base: 1; --z-sticky: 20; --z-nav: 40; --z-menu: 50; --z-toast: 60; --z-modal: 100;
}
@media (min-width: 768px) {
  :root { --page-gutter: 24px; --font-size-h1: 48px; --font-size-h2: 34px; --font-size-h3: 23px; }
}
@media (min-width: 1024px) {
  :root { --page-gutter: 32px; --font-size-h1: 64px; --font-size-h2: 40px; --font-size-h3: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; }
}