/* =====================================================================
   Loriini — tokens.css
   Jedyne źródło wartości wizualnych. Bloki (blocks.css) nie znają hexów.
   Warianty ciemne: klasa .is-dark na sekcji przełącza warstwę semantyczną.
   ===================================================================== */

/* --- Fonty (self-hosted, woff2, swap) ------------------------------- */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin-ext.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: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin.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;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-latin-ext.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: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-latin.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 {
  /* --- 1. Prymitywy marki (z linii contentu Loriini) ---------------- */
  --ink:        #191713;
  --ink-deep:   #241F19;
  --cream:      #EDE7DC;
  --cream-2:    #E3DBCB;
  --gold:       #A8874E;
  --gold-deep:  #7A5F26;
  --stone:      #6E6558;
  --stone-2:    #A79E90;
  --sage:       #55603F;
  --white:      #FFFFFF;

  --display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- 2. Warstwa semantyczna — wariant jasny (domyślny) ------------ */
  --bg:          var(--cream);
  --bg-2:        var(--cream-2);
  --bg-raised:   var(--white);
  --fg:          var(--ink);
  --fg-2:        var(--stone);          /* 4.7:1 na cream — tekst drugorzędny */
  --fg-3:        var(--stone-2);        /* dekoracyjny, nie dla tekstu < 24px */
  --accent:      var(--gold);           /* linie, detale — nigdy tekst na jasnym */
  --accent-text: var(--gold-deep);      /* 4.9:1 na cream — eyebrow, liczby */
  --line:        rgba(25, 23, 19, .14);
  --line-strong: rgba(25, 23, 19, .38);
  --line-accent: var(--gold);

  --btn-bg:       var(--ink);
  --btn-fg:       var(--cream);
  --btn-bg-hover: var(--ink-deep);
  --ghost-fg:     var(--ink);
  --ghost-line:   var(--ink);
  --ghost-bg-hover: var(--cream-2);      /* nieprzezroczysty: bramki stanów liczą realny kontrast */

  --field-bg:     var(--white);
  --field-line:   rgba(25, 23, 19, .38);
  --field-fg:     var(--ink);
  --field-error:  #8F3A2E;               /* 5.9:1 na cream */

  --focus:        var(--gold);
  --scrim:        rgba(16, 18, 20, .55);
  --shadow-sep:   0 1px 0 rgba(25, 23, 19, .08);

  /* --- 3. Typografia ----------------------------------------------- */
  --fs-h1:      clamp(2.4rem, 6vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 2.75rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.72rem;
  --fs-num:     clamp(2rem, 4vw, 3rem);
  --fs-price:   clamp(1.75rem, 3vw, 2.4rem);
  --fs-quote:   1.35rem;

  --lh-tight:   1.05;
  --lh-head:    1.15;
  --lh-body:    1.7;
  --ls-eyebrow: .18em;
  --ls-h1:      -.01em;
  --measure:    68ch;

  /* --- 4. Przestrzeń i siatka -------------------------------------- */
  --container:  1240px;
  --gutter:     24px;
  --section-y:  clamp(72px, 10vw, 140px);
  --section-y-sm: clamp(40px, 6vw, 72px);
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
  --header-h: 72px;
  --sticky-h: 64px;

  /* --- 5. Kształt, ruch ------------------------------------------- */
  --radius:     2px;
  --radius-0:   0;
  --line-w:     1px;
  --focus-w:    2px;
  --dur:        500ms;
  --dur-fast:   200ms;
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --reveal-y:   12px;
  --z-header:   40;
  --z-sticky:   30;
  --z-lightbox: 60;
  --z-consent:  50;
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}

/* --- Wariant ciemny bloku ------------------------------------------- */
.is-dark {
  --bg:          var(--ink);
  --bg-2:        var(--ink-deep);
  --bg-raised:   var(--ink-deep);
  --fg:          var(--cream);
  --fg-2:        var(--stone-2);        /* 6.8:1 na ink */
  --fg-3:        var(--stone);
  --accent:      var(--gold);
  --accent-text: var(--gold);           /* 5.4:1 na ink */
  --line:        rgba(237, 231, 220, .16);
  --line-strong: rgba(237, 231, 220, .42);
  --line-accent: var(--gold);

  --btn-bg:       var(--cream);
  --btn-fg:       var(--ink);
  --btn-bg-hover: var(--cream-2);
  --ghost-fg:     var(--cream);
  --ghost-line:   var(--cream);
  --ghost-bg-hover: var(--ink-deep);

  --field-bg:     var(--ink-deep);
  --field-line:   rgba(237, 231, 220, .42);
  --field-fg:     var(--cream);
  --field-error:  #E0A08F;               /* 8.6:1 na ink */

  --shadow-sep:   0 1px 0 rgba(237, 231, 220, .08);
  color-scheme: dark;
}