/* ==========================================================================
   Liikye - tokeny z systemu projektowego (Claude Design)

   ZRODLO: projekt "Liikye Design System" a3a02c1f-32ca-4dca-9cf7-d5d9ef3d4b7e,
   pliki tokens/*.css, odczytane 2026-08-01. To jest JEDYNE miejsce z wartosciami.
   Arkusz liikye.css nie trzyma juz zadnych liczb ani kolorow - ma tylko warstwe
   aliasow wskazujaca tutaj.

   ZASADA PRZY AKTUALIZACJI: ten plik przepisujemy z systemu w calosci, nie
   dopisujemy do niego wlasnych wartosci. Wlasne rzeczy ida do liikye.css.

   CO SWIADOMIE POMINIETO Z TAMTEJ STRONY (dwa pliki z osmiu):
   1. tokens/fonts.css - laduje Plus Jakarta Sans i JetBrains Mono z Google Fonts
      przez @import. Nie bierzemy: obce polaczenie przed pierwszym renderem,
      brak kontroli nad cache, a przy landingach reklamowych zewnetrzne zasoby
      byly czescia historii odrzucen w Google Ads. Mamy wlasne pliki woff2
      hostowane lokalnie, z preload i dopasowanymi metrykami zastepczymi.
      Sam plik przyznaje, ze to zamiennik z braku binariow kroju.
   2. tokens/base.css - wlasny reset (body, h1-h4, a, p, focus). Nadpisalby
      nasza typografie i uklad. Nasz reset w liikye.css jest bogatszy.
   ========================================================================== */

/* --- tokens/colors.css --------------------------------------------------- */

:root {
  /* Marka */
  --orange-50: #fff2ee;
  --orange-100: #ffe1d8;
  --orange-200: #ffc3b2;
  --orange-300: #ff9c81;
  --orange-400: #ff7a58;
  --orange-500: #ff5436;
  --orange-600: #e93d20;
  --orange-700: #bd2c13;

  /* Szarosci */
  --ink-900: #0e0f11;
  --ink-800: #1b1d21;
  --ink-700: #33363d;
  --ink-600: #4e525b;
  --ink-500: #6b7080;
  --ink-400: #9aa0ad;
  --ink-300: #c6cad3;
  --ink-200: #e3e6eb;
  --ink-100: #f1f3f6;
  --ink-50: #f7f8fa;
  --white: #ffffff;

  /* Statusy. Trzy odcienie z rolami:
     500 wylacznie dekoracja (ikony, paski, kropki - grafice wystarczy 3:1),
     700 tekst i solidne plakietki (wszystkie AA na bieli i pod bialym napisem),
     50  tlo. */
  --green-500: #16a34a;
  --green-700: #15803d;
  --green-50: #eafaf0;
  /* 200 to obwodka pola w kolorze statusu - odpowiednik --orange-200 po stronie
     zieleni. Dodane 31.08.2026, gdy baner promocji zaczal zmieniac barwe na
     zielona po zalapaniu oferty i potrzebowal ramki jasniejszej niz 500. */
  --green-200: #b6e7c8;
  --amber-500: #f5a623;
  --amber-700: #b45309;
  --amber-50: #fff6e6;
  --red-500: #dc2626;
  --red-700: #b91c1c;
  --red-50: #fdeceb;
  --blue-500: #2563eb;
  --blue-700: #1d4ed8;
  --blue-50: #eaf0fe;

  /* Platformy. Tylko plakietki i ikony sieci. */
  --platform-instagram: #e1306c;
  --platform-tiktok: #010101;
  --platform-youtube: #ff0000;
  --platform-facebook: #1877f2;

  --star-fill: #ffb400;

  /* Role tekstu. Pomaranczowy NAPIS to zawsze 700 (5,94:1);
     500 nadaje sie na wypelnienia, obwodki i bardzo duzy tekst. */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-accent: var(--orange-700);
  --text-link: var(--orange-700);
  --text-link-hover: var(--orange-600);
  --text-on-accent: var(--white);
  --text-success: var(--green-700);
  --text-warning: var(--amber-700);
  --text-danger: var(--red-700);
  --text-info: var(--blue-700);

  /* Powierzchnie */
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-50);
  --surface-contrast: var(--ink-900);
  --surface-accent: var(--orange-500);
  --surface-accent-soft: var(--orange-50);

  /* Obwodki i obwodka skupienia */
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-accent: var(--orange-500);
  --focus-ring: var(--orange-500);

  /* Akcje */
  --action-primary: var(--orange-500);
  --action-primary-hover: var(--orange-600);
  --action-primary-active: var(--orange-700);
  --action-secondary: var(--ink-900);
  --action-secondary-hover: var(--ink-800);
  --action-disabled: var(--ink-200);
  --action-disabled-text: var(--ink-400);

  /* Statusy w rolach. --status-* to odcien tekstowy i solidnej plakietki,
     --status-*-fill jest wylacznie dekoracyjny. */
  --status-success: var(--green-700);
  --status-success-fill: var(--green-500);
  --status-success-bg: var(--green-50);
  --status-warning: var(--amber-700);
  --status-warning-fill: var(--amber-500);
  --status-warning-bg: var(--amber-50);
  --status-danger: var(--red-700);
  --status-danger-fill: var(--red-500);
  --status-danger-bg: var(--red-50);
  --status-info: var(--blue-700);
  --status-info-fill: var(--blue-500);
  --status-info-bg: var(--blue-50);
}

/* --- tokens/radius.css --------------------------------------------------- */

:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-chip: var(--radius-pill);
  --radius-sheet: var(--radius-xl);
}

/* --- tokens/spacing.css -------------------------------------------------- */

:root {
  --space-0: 0px;
  --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;
  --space-32: 128px;

  --gutter-mobile: var(--space-5);
  --gutter-desktop: var(--space-10);
  --section-y-mobile: var(--space-16);
  --section-y-desktop: var(--space-24);
  --container-max: 1200px;
  --container-narrow: 760px;
  --tap-min: 48px;
}

/* --- tokens/motion.css --------------------------------------------------- */

:root {
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --press-scale: .97;
}

/* --- tokens/elevation.css ------------------------------------------------ */

:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(14, 15, 17, .06);
  --shadow-sm: 0 2px 8px rgba(14, 15, 17, .06);
  --shadow-md: 0 8px 24px rgba(14, 15, 17, .08);
  --shadow-lg: 0 20px 48px rgba(14, 15, 17, .12);
  --shadow-accent: 0 8px 20px rgba(255, 84, 54, .28);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .6);
  --ring-focus: 0 0 0 3px rgba(255, 84, 54, .32);
}

/* --- tokens/typography.css ----------------------------------------------- */

:root {
  /* ODSTEPSTWO OD ZRODLA, JEDYNE I SWIADOME: w systemie obie rodziny to Plus
     Jakarta Sans, bo nie dostal plikow kroju i podstawil zamiennik. Mateusz
     zatwierdzil Outfit na naglowki i Jakarta na tresc, i takie pliki mamy
     lokalnie. Nazwy rodzin wskazuja wiec na nasze wlasne @font-face razem
     z krojami zastepczymi o dopasowanych metrykach. */
  --font-display: "Liikye Display", "Liikye Display zastepczy", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Liikye Text", "Liikye Text zastepczy", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Skala od telefonu w gore; stopnie na duzy ekran w --fs-*-lg. */
  --fs-display: 44px;
  --fs-display-lg: 76px;
  --fs-h1: 34px;
  --fs-h1-lg: 56px;
  --fs-h2: 26px;
  --fs-h2-lg: 40px;
  --fs-h3: 21px;
  --fs-h3-lg: 28px;
  --fs-h4: 18px;
  --fs-h4-lg: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-micro: 11px;

  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.6;

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

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-body: 0em;
  --tracking-caps: 0.08em;

  --type-hero-weight: var(--fw-black);
  --type-eyebrow-size: var(--fs-micro);
  --type-price-family: var(--font-display);
}