/* =====================================================================
   PIVO A VEJCE — Core tokens
   Colors, type, spacing, radii, shadows.
   Import this file first; everything else builds on these vars.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- CORE PALETTE ------------------------------------------ */
  /* Hero egg-yolk yellow — the brand's single loudest voice */
  --yolk:        #F7C63B;
  --yolk-deep:   #E8A92B;   /* hover / active / darker yolks */
  --yolk-soft:   #FBE29A;   /* tints, backgrounds */

  /* Cream / shell — warm off-white, everywhere */
  --shell:       #F4EBD6;
  --shell-warm:  #EADFC0;
  --shell-cool:  #FBF6E8;

  /* Ink — not pure black; a warm near-black */
  --ink:         #1A1613;
  --ink-soft:    #2E2721;
  --ink-mute:    #5C5149;   /* secondary text on cream */

  /* Beer-foam white */
  --foam:        #FFFDF5;

  /* Accents */
  --paprika:     #C8321E;   /* stamp red, sale tags, headline punch */
  --paprika-deep:#9C2414;
  --moss:        #5A6B2E;   /* rare secondary — hop/barley green */
  --brass:       #8A6A1F;   /* rare, used on paper-y surfaces */

  /* ---------- SEMANTIC COLOR TOKENS --------------------------------- */
  --bg:          var(--shell);
  --bg-alt:      var(--shell-cool);
  --bg-invert:   var(--ink);
  --bg-hero:     var(--yolk);

  --fg:          var(--ink);
  --fg-1:        var(--ink);          /* primary text */
  --fg-2:        var(--ink-soft);     /* body */
  --fg-3:        var(--ink-mute);     /* captions, meta */
  --fg-invert:   var(--foam);
  --fg-on-yolk:  var(--ink);

  --accent:      var(--paprika);
  --accent-fg:   var(--foam);

  --border:      var(--ink);          /* borders are almost always ink — we love thick black outlines */
  --border-soft: rgba(26, 22, 19, 0.16);

  --focus-ring:  var(--paprika);

  /* ---------- TYPE ---------------------------------------------------- */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;     /* absurd, loud, full Czech */
  --font-serif:   'Fraunces', 'Georgia', serif;                            /* editorial, handles Czech diacritics */
  --font-sans:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;    /* UI, body */
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;        /* stamps, prices, codes */

  /* Type scale — opinionated, with generous big-end */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  88px;
  --fs-7xl:  128px;
  --fs-8xl:  176px;

  --lh-tight:   0.92;
  --lh-snug:    1.08;
  --lh-body:    1.5;
  --lh-loose:   1.7;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-stamp: 0.14em;

  /* ---------- SPACING ------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADII --------------------------------------------------- */
  /* We are NOT a rounded-corners brand. Most things are sharp.
     Exceptions: pill tags, the egg-shape, buttons on mobile. */
  --r-0:   0px;
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  8px;
  --r-pill:999px;
  --r-egg: 50% 50% 48% 48% / 62% 62% 38% 38%;   /* literal egg silhouette */

  /* ---------- BORDERS ------------------------------------------------- */
  --bw-thin:   1px;
  --bw-med:    2px;
  --bw-thick:  3px;
  --bw-heavy:  4px;       /* our signature outline */
  --bw-chunk:  6px;

  /* ---------- SHADOWS ------------------------------------------------- */
  /* We prefer HARD offset shadows (risograph / rubber-stamp feel) to blurry ones. */
  --sh-hard-sm: 3px 3px 0 var(--ink);
  --sh-hard:    5px 5px 0 var(--ink);
  --sh-hard-lg: 8px 8px 0 var(--ink);
  --sh-hard-yolk: 5px 5px 0 var(--yolk-deep);
  --sh-hard-paprika: 4px 4px 0 var(--paprika-deep);
  /* Soft shadows used sparingly (menus, modals) */
  --sh-soft:    0 6px 20px rgba(26, 22, 19, 0.12);
  --sh-soft-lg: 0 18px 48px rgba(26, 22, 19, 0.18);

  /* ---------- MOTION -------------------------------------------------- */
  --ease-pop:  cubic-bezier(.2, .9, .25, 1.2);   /* slight overshoot — springy */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  420ms;
}

/* =====================================================================
   SEMANTIC TEXT STYLES — use these directly on elements
   ===================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-5xl), 9vw, var(--fs-7xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 1em 0;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.4;
  color: var(--fg-1);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-stamp);
  color: var(--fg-3);
}

.stamp {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-stamp);
  color: var(--paprika);
  border: var(--bw-med) solid var(--paprika);
  padding: 4px 8px;
  display: inline-block;
  transform: rotate(-2deg);
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-6xl), 14vw, var(--fs-8xl));
  line-height: 0.85;
  letter-spacing: -0.03em;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--shell-warm);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* Czech + English bilingual pair — small Czech tagline under English */
.bilingual {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.bilingual .cz {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72em;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* Selection */
::selection { background: var(--yolk); color: var(--ink); }