/*
 * Tokeny designu - WYLACZNIE aliasy, zero regul wizualnych.
 *
 * JEDNYM zrodlem wartosci jest theme.json. Ten plik tylko nadaje im krotkie
 * nazwy uzywane w makiecie (--acc, --paper, --ink...), zeby markup przeniesiony
 * 1:1 z Claude Design dzialal doslownie, bez drugiej listy hexow.
 *
 * Zmiana koloru = zmiana w theme.json. Tutaj nigdy nie wpisujemy hexa.
 *
 * Plik jest bezpieczny do zaladowania w kanwe edytora wlasnie dlatego, ze nie
 * zawiera ani jednej reguly zmieniajacej wyglad.
 */
:root {
  --acc:       var(--wp--preset--color--accent);
  --acc-dk:    var(--wp--preset--color--accent-dk);
  --paper:     var(--wp--preset--color--paper);
  --panel:     var(--wp--preset--color--panel);
  --ink:       var(--wp--preset--color--ink);
  --ink2:      var(--wp--preset--color--ink-soft);
  --muted:     var(--wp--preset--color--muted);
  --rule:      var(--wp--preset--color--rule);
  /* Linia na ciemnym tle - zmierzona w 7 wystapieniach sekcji atramentowych. */
  --rule-ink:  var(--wp--preset--color--rule-ink);

  --ff-display: var(--wp--preset--font-family--display);
  --ff-body:    var(--wp--preset--font-family--body);
  --ff-mono:    var(--wp--preset--font-family--mono);

  /* Grubosci linii - w tym designie linie ZASTEPUJA cienie i zaokraglenia,
     wiec sa nosnikiem faktury marki, nie detalem. */
  --rule-hair:  var(--wp--custom--rule--hair);
  --rule-thin:  var(--wp--custom--rule--thin);
  --rule-mid:   var(--wp--custom--rule--mid);
  --rule-thick: var(--wp--custom--rule--thick);
  --rule-card:  var(--wp--custom--rule--card);

  --container-max: var(--wp--custom--container--max);
  --container-pad: var(--wp--custom--container--pad);

  /* Odstep od gory dla elementow przyklejanych pod naglowkiem. Naglowek ma
     75 px - zmierzone w makiecie i na wdrozonej stronie, ta sama liczba -
     wiec 104 px zostawia 29 px oddechu. Wartosc pochodzi z makiety, nie
     z wyliczenia; token istnieje po to, zeby nie powtarzac jej w arkuszach. */
  --sticky-top: var(--wp--custom--sticky--top);

  /* Typografia - te same nazwy co w :root makiety Claude Design, wiec zapis
     "font-size:var(--fs-xl)" przeniesiony z makiety dziala w motywie
     doslownie. Wartosci siedza w theme.json (presety pisma, custom.lh,
     custom.ls). Cyfra w slugu dostaje myslnik w nazwie zmiennej rdzenia:
     slug "2xl" -> --wp--preset--font-size--2-xl (_wp_to_kebab_case). */
  --fs-2xs: var(--wp--preset--font-size--2-xs);
  --fs-xs:  var(--wp--preset--font-size--xs);
  --fs-sm:  var(--wp--preset--font-size--sm);
  --fs-base: var(--wp--preset--font-size--base);
  --fs-lg:  var(--wp--preset--font-size--lg);
  --fs-xl:  var(--wp--preset--font-size--xl);
  --fs-2xl: var(--wp--preset--font-size--2-xl);
  --fs-3xl: var(--wp--preset--font-size--3-xl);
  --fs-4xl: var(--wp--preset--font-size--4-xl);

  --lh-display: var(--wp--custom--lh--display);
  --lh-heading: var(--wp--custom--lh--heading);
  --lh-compact: var(--wp--custom--lh--compact);
  --lh-text:    var(--wp--custom--lh--text);

  --ls-page:   var(--wp--custom--ls--page);
  --ls-logo:   var(--wp--custom--ls--logo);
  --ls-ui:     var(--wp--custom--ls--ui);
  --ls-label:  var(--wp--custom--ls--label);
  --ls-kicker: var(--wp--custom--ls--kicker);

  /* Odstepy. Osiem stopni to presety (suwak w edytorze), piec najwiekszych to
     tokeny - odstepow sekcji redaktor nie ustawia recznie. Cyfra w slugu
     dostaje myslnik w nazwie zmiennej rdzenia, tak samo jak przy pismie. */
  --space-three-xs: var(--wp--preset--spacing--three-xs);
  --space-two-xs: var(--wp--preset--spacing--two-xs);
  --space-xs:  var(--wp--preset--spacing--xs);
  --space-sm:  var(--wp--preset--spacing--sm);
  --space-md:  var(--wp--preset--spacing--md);
  --space-lg:  var(--wp--preset--spacing--lg);
  --space-xl:  var(--wp--preset--spacing--xl);
  --space-two-xl: var(--wp--preset--spacing--two-xl);
  --space-hair: var(--wp--custom--space--hair);
  --space-three-xl: var(--wp--preset--spacing--three-xl);
  --space-four-xl: var(--wp--preset--spacing--four-xl);
  --space-five-xl: var(--wp--preset--spacing--five-xl);
  --space-six-xl: var(--wp--preset--spacing--six-xl);
  --space-seven-xl: var(--wp--preset--spacing--seven-xl);

  /* Margines boczny kontenera: 36 px, ponizej 480 px 20 px (makieta: --pad-x). */
  --container-pad-narrow: var(--wp--custom--container--pad-narrow);

  --measure-aside: var(--wp--custom--measure--aside);
}