/**
 * Growth Bakers — strona glowna: warstwa tokenow.
 *
 * Kolejnosc kaskady trzymana w @layer, zeby nie zalezala od miejsca w pliku.
 * Metodologia przeniesiona 1:1 z AITIVE: paleta i ROLA to dwie rozne rzeczy.
 * Strona ma szesc plaszczyzn (biel, szarosc, mieta, cyan, czern, mieta blada),
 * wiec bez tego rozdzialu kazdy kolor tekstu trzeba by pisac szesc razy.
 */
@layer tokens, base, components, sections, motion, rwd;

@layer tokens {
  :root {
    /* ---------- PALETA (nigdy sie nie odwraca) ---------- */
    --paper: oklch(100% 0 90);            /* #ffffff */
    --grey: oklch(96.7% 0.003 106.4);     /* #f4f4f2 */
    --grey-line: oklch(92.9% 0.013 255.5);/* #e2e8f0 */
    --ink: oklch(28.1% 0 90);             /* #292929 */
    --ink-soft: oklch(36.4% 0 90);        /* #3e3e3e */

    --mint: oklch(88.9% 0.184 161.5);     /* #39ffb3 — plaszczyzna i akcent na ciemnym */
    --mint-dark: oklch(74.3% 0.157 164.6);/* #00ca92 — TYLKO dekoracja, na bieli ma 2.1:1 */
    --mint-deep: oklch(59.9% 0.139 158.6);
    --mint-pale: oklch(95.1% 0.066 170.0);
    --cyan: oklch(87.5% 0.139 203.5);
    --purple: oklch(53.0% 0.293 293.9);   /* biel na nim: 6.3:1 */
    --purple-pale: oklch(92.0% 0.044 297.0);
    --yellow: oklch(92.3% 0.194 102.5);

    /*
     * Mieta w roli TEKSTU na jasnym tle. Markowy --mint-dark daje na bieli
     * 2.13:1, wiec nie nadaje sie na litery — ten stopien daje 5.5:1 i trzyma
     * ten sam odcien.
     */
    --mint-text: oklch(50% 0.130 163);

    /* ---------- STOPNIE TEKSTU ---------- */
    /* na jasnych plaszczyznach (biel / szarosc / mieta / cyan / mieta blada) */
    --on-light-1: var(--ink);             /* 14.6:1 na bieli */
    --on-light-2: oklch(36.4% 0 90);      /* 10.3:1 */
    --on-light-3: oklch(45% 0 90);        /* 7.3:1  */
    --on-light-4: oklch(52% 0 90);        /* 5.5:1 — dolny prog, dalej AA */

    /* na ciemnej plaszczyznie */
    --on-dark-1: oklch(100% 0 90);        /* 14.6:1 na #292929 */
    --on-dark-2: oklch(89% 0 90);         /* 10.2:1 */
    --on-dark-3: oklch(81% 0 90);         /*  8.3:1 */
    --on-dark-4: oklch(68% 0 90);         /*  5.8:1 */

    /* ---------- ROLE (odwracaja sie na plaszczyznie) ---------- */
    --fg-1: var(--on-light-1);
    --fg-2: var(--on-light-2);
    --fg-3: var(--on-light-3);
    --fg-4: var(--on-light-4);
    --accent-text: var(--mint-text);      /* wyroznienie w naglowku */
    --rule: color-mix(in oklab, var(--fg-1) 12%, transparent);
    --rule-soft: color-mix(in oklab, var(--fg-1) 7%, transparent);

    /* ---------- TYPOGRAFIA ---------- */
    --font-sans: 'Montserrat', system-ui, sans-serif;
    --font-hand: 'Pacifico', cursive;

    --fs-h1: clamp(2.1rem, 1.5rem + 3.5vw, 4.5rem);
    --fs-h2: clamp(1.55rem, 1.1rem + 2.4vw, 3.1rem);
    --fs-h3: clamp(1.15rem, 1rem + .8vw, 1.6rem);
    --fs-h4: 1.05rem;
    --fs-hand: clamp(1.15rem, 1rem + .9vw, 1.75rem);
    --fs-body: clamp(.95rem, .9rem + .2vw, 1.06rem);
    --fs-sm: .95rem;
    --fs-xs: .86rem;
    --fs-2xs: .78rem;
    --fs-3xs: .72rem;

    --lh-display: 1.12;
    --lh-head: 1.35;
    --lh-body: 1.65;
    --lh-snug: 1.55;

    --ls-display: -1.5px;
    --ls-head: -.5px;
    --ls-wide: 2px;

    /* ---------- RYTM ---------- */
    --pad-x: clamp(20px, 6vw, 90px);
    --sec-y: clamp(64px, 8vw, 110px);
    --block-y: clamp(64px, 7vw, 100px);
    --wrap: 1240px;

    --sp-1: 4px;  --sp-2: 6px;  --sp-3: 10px; --sp-4: 14px;
    --sp-5: 18px; --sp-6: 22px; --sp-7: 26px; --sp-8: 34px;
    --sp-9: 46px; --sp-10: 56px;

    --r-1: 5px;  --r-2: 8px;   --r-3: 14px; --r-4: 18px;
    --r-5: 22px; --r-6: 28px;  --r-pill: 50px; --r-circle: 50%;

    /* ---------- RUCH ---------- */
    --dur-1: 140ms;  /* nacisniecie */
    --dur-2: 250ms;  /* hover */
    --dur-3: 400ms;  /* wejscie */
    --dur-4: 700ms;  /* dluga zmiana, np. slupki wykresu */
    --ease-out: cubic-bezier(.16, .84, .24, 1);
    --ease-bar: cubic-bezier(.2, .7, .3, 1);
  }

  /*
   * Plaszczyzna ustawia stopnie tekstu dla siebie i wszystkiego w srodku.
   * Tla korzystaja z palety, wiec biala karta w ciemnej sekcji zostaje biala,
   * a tekst w niej sam wraca na ciemny.
   */
  /* plaszczyzna nie tylko przestawia zmienne — sama nadaje kolor tekstu,
     inaczej dzieci dziedziczylyby kolor po <body> i nic by sie nie zmienilo */
  [data-surface] { color: var(--fg-1); }

  [data-surface="light"] {
    --fg-1: var(--on-light-1);
    --fg-2: var(--on-light-2);
    --fg-3: var(--on-light-3);
    --fg-4: var(--on-light-4);
    --accent-text: var(--mint-text);
  }

  [data-surface="dark"] {
    --fg-1: var(--on-dark-1);
    --fg-2: var(--on-dark-2);
    --fg-3: var(--on-dark-3);
    --fg-4: var(--on-dark-4);
    --accent-text: var(--mint);           /* na czerni markowa mieta ma 11.2:1 */
  }
}