/* ============================================================
   A. BLIKLE — Colors & Type tokens
   Per Księga Znaku (brand book) + production site (blikle.pl)
   ============================================================ */

/* Fonts
   - Display: Fino (brand mandated) — licensed file in fonts/fino-medium.ttf.
              Fino Medium covers upright + italic at one weight. For other weights
              (regular/bold), fall back to Playfair Display until licensed files
              for those cuts are provided.
   - Body:    Avenir Next (brand mandated) — NOT YET PROVIDED; substituting DM Sans. */
@font-face {
  font-family: "Fino";
  src: url("fonts/fino-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Most display headlines use italic. Fino Medium's italic cut is in the same file
   when rendered with `font-style: italic` (italics are usually slope-only). If your
   licensed Fino bundle ships italic separately, point a second @font-face here. */
@font-face {
  font-family: "Fino";
  src: url("fonts/fino-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap");

:root {
  /* ---------- Brand: primary (gold) ---------- */
  --gold:        #8c734c;   /* primary — logo color, CTAs */
  --gold-soft:   #b39870;   /* gradient highlight */
  --gold-deep:   #6e5938;   /* gradient shadow, hover */

  /* ---------- Brand: secondary palette (Księga Znaku p.5) ---------- */
  --mint:        #82cbad;   /* accent — fresh / spring lines */
  --teal:        #2f6c68;   /* deep teal — headers / utility bar */
  --teal-deep:   #1f4d4a;   /* darker variant for dark sections */
  --peach:       #fbcbbc;   /* soft pink — packaging family */
  --coral:       #e8a89f;   /* coral — main pink nav bar (blikle.pl) */

  /* Production-site warm browns (blikle-chrome.css) */
  --bk-olive:      #8a724b;  /* utility bar / footer brown */
  --bk-olive-dark: #715d3d;
  --bk-pink:       #d8a59f;  /* main pink nav bar */
  --bk-pink-dark:  #c9938c;

  /* ---------- Neutrals ---------- */
  --paper:       #fbf7ee;  /* warm cream — page background */
  --paper-2:     #f3ecdb;  /* secondary surface */
  --cream:       #f8f1e4;  /* footer light text bg */
  --ink:         #1d1a14;  /* near-black with warm tint */
  --ink-2:       #4a4338;  /* secondary text */
  --rule:        rgba(140,115,76,.28);
  --rule-2:      rgba(140,115,76,.12);

  /* ---------- Semantic ---------- */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-2);
  --bg-dark:     var(--teal-deep);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-2);
  --fg-soft:     #7d6e54;
  --accent:      var(--gold);
  --accent-hover:var(--gold-deep);
  --on-accent:   var(--paper);
  --success:     #3a7a52;
  --warning:     #c47a5a;
  --link:        var(--gold);

  /* ---------- Typography ---------- */
  /* Display font stack — Playfair Display leads because the provided
     fino-medium.ttf appears to contain only uppercase glyphs. Once a
     full Fino cut (with lowercase + Polish diacritics) is provided,
     promote "Fino" back to the front of this list. */
  --font-display: "Playfair Display", "Fino", "Didot", serif;
  --font-body:    "DM Sans", "Avenir Next", -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (display = serif italic-leaning; body = sans) */
  --fs-display-xl: clamp(50px, 6.6vw, 98px); /* hero */
  --fs-display-l:  clamp(38px, 4.6vw, 64px); /* section h2 */
  --fs-display-m:  clamp(28px, 3.4vw, 44px); /* pull-quote */
  --fs-h3:         26px;
  --fs-h4:         22px;
  --fs-lead:       17px;
  --fs-body:       16px;
  --fs-sm:         14px;
  --fs-xs:         13px;
  --fs-eyebrow:    11px;
  --fs-meta:       10px;

  --lh-display:    1.02;
  --lh-body:       1.6;
  --lh-tight:      1.2;

  --ls-eyebrow:    .28em;
  --ls-nav:        .18em;
  --ls-label:      .22em;

  /* ---------- Spacing ---------- */
  --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;
  --space-10: 130px; /* section vertical rhythm */

  /* ---------- Radius (Blikle prefers sharp / minimal rounding) ---------- */
  --r-0: 0px;        /* default — Blikle is mostly sharp-cornered */
  --r-1: 2px;
  --r-2: 6px;        /* small chips */
  --r-pill: 999px;   /* cart counter, pills */

  /* ---------- Shadows ---------- */
  --shadow-1: 0 2px 6px rgba(29,26,20,.08);
  --shadow-2: 0 12px 40px rgba(0,0,0,.12);
  --shadow-3: 0 24px 50px -32px rgba(29,26,20,.4);
  --shadow-hero: 0 40px 80px -40px rgba(29,26,20,.5);

  /* ---------- Containers ---------- */
  --container: 1280px;
  --container-wide: 1320px;
  --container-pad: 36px;
}

/* ============================================================
   Semantic element styles — apply by class for clarity
   ============================================================ */
.bk-h1, h1.bk {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: -.012em;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
.bk-h1 em, h1.bk em { font-style: italic; color: var(--gold); font-weight: 500; }

.bk-h2, h2.bk {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: -.008em;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
.bk-h2 em, h2.bk em { font-style: italic; color: var(--gold); }

.bk-h3, h3.bk {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}

.bk-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.bk-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--fg-muted);
}

.bk-body, p.bk {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.bk-italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

/* Logotype lockup — gold gradient text (matches header brand mark) */
.bk-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #b39870 0%, #8c734c 60%, #6e5938 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}