/* ─────────────────────────────────────────────────────────────
   marienkova.design — Foundations
   Kateřina Marienková · grafická designérka
   ───────────────────────────────────────────────────────────── */

/* Fonts — Satoshi self-hosted (uploaded .otf), Poppins via Google Fonts */
/* Poppins odstranen — fallback Satoshi */
/* Satoshi — weights 300/400/500/700/900, roman + italic (self-hosted webfonts) */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Light.woff2") format("woff2"),
       url("fonts/Satoshi-Light.woff") format("woff"),
       url("fonts/Satoshi-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-LightItalic.woff2") format("woff2"),
       url("fonts/Satoshi-LightItalic.woff") format("woff"),
       url("fonts/Satoshi-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.woff2") format("woff2"),
       url("fonts/Satoshi-Regular.woff") format("woff"),
       url("fonts/Satoshi-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Italic.woff2") format("woff2"),
       url("fonts/Satoshi-Italic.woff") format("woff"),
       url("fonts/Satoshi-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.woff2") format("woff2"),
       url("fonts/Satoshi-Medium.woff") format("woff"),
       url("fonts/Satoshi-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-MediumItalic.woff2") format("woff2"),
       url("fonts/Satoshi-MediumItalic.woff") format("woff"),
       url("fonts/Satoshi-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.woff2") format("woff2"),
       url("fonts/Satoshi-Bold.woff") format("woff"),
       url("fonts/Satoshi-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-BoldItalic.woff2") format("woff2"),
       url("fonts/Satoshi-BoldItalic.woff") format("woff"),
       url("fonts/Satoshi-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Black.woff2") format("woff2"),
       url("fonts/Satoshi-Black.woff") format("woff"),
       url("fonts/Satoshi-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-BlackItalic.woff2") format("woff2"),
       url("fonts/Satoshi-BlackItalic.woff") format("woff"),
       url("fonts/Satoshi-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* ── Brand palette ───────────────────────────────────────── */
  /* The four foundation colors, sampled directly from the
     brand palette image. Red is the hero; everything else
     is supporting. */
  --color-red:        #e73d3b;   /* Primary accent — the "dot" */
  --color-blue:       #367bed;   /* Secondary accent           */
  --color-cream:      #f5f0ea;   /* Warm off-white surface     */
  --color-ink:        #1d1e18;   /* Near-black, very slightly  */
                                  /* warm — never pure #000     */
  --color-white:      #ffffff;

  /* ── Neutral scale (warm, anchored to --color-cream/--ink) ─ */
  --neutral-0:        #ffffff;
  --neutral-50:       #faf7f3;
  --neutral-100:      #f5f0ea;   /* = --color-cream             */
  --neutral-200:      #ebe5dd;
  --neutral-300:      #d9d2c8;
  --neutral-400:      #aea79c;
  --neutral-500:      #807a70;
  --neutral-600:      #5a554d;
  --neutral-700:      #38362f;
  --neutral-800:      #25241f;
  --neutral-900:      #1d1e18;   /* = --color-ink               */

  /* ── Red & Blue scales ───────────────────────────────────── */
  --red-100:          #fbe1e0;
  --red-300:          #f08987;
  --red-500:          #e73d3b;   /* = --color-red               */
  --red-700:          #b22321;
  --red-900:          #6e1110;

  --blue-100:         #dee9fc;
  --blue-300:         #88adf4;
  --blue-500:         #367bed;   /* = --color-blue              */
  --blue-700:         #1d57b9;
  --blue-900:         #0e2f6b;

  /* ── Semantic surface / foreground tokens ────────────────── */
  --bg:               var(--color-cream);
  --bg-elevated:      var(--color-white);
  --bg-inverse:       var(--color-ink);
  --bg-accent:        var(--color-red);

  --fg:               var(--color-ink);
  --fg-muted:         var(--neutral-600);
  --fg-subtle:        var(--neutral-500);
  --fg-inverse:       var(--color-cream);
  --fg-accent:        var(--color-red);
  --fg-link:          var(--color-ink);          /* underlined */
  --fg-link-hover:    var(--color-red);

  --border:           var(--neutral-300);
  --border-strong:    var(--color-ink);

  --selection-bg:     var(--color-red);
  --selection-fg:     var(--color-cream);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:     "Satoshi", "Poppins", system-ui, sans-serif;
  --font-body:        "Satoshi", system-ui, sans-serif;
  --font-accent:      "Poppins", "Satoshi", sans-serif;

  /* Type scale — tight, geometric. Mobile baselines.        */
  --fs-display:       clamp(3.5rem, 8vw, 7.5rem);   /* 56–120 */
  --fs-h1:            clamp(2.5rem, 5vw, 4.5rem);   /* 40–72  */
  --fs-h2:            clamp(2rem, 3.5vw, 3rem);     /* 32–48  */
  --fs-h3:            clamp(1.5rem, 2.5vw, 2rem);   /* 24–32  */
  --fs-h4:            1.25rem;                      /* 20     */
  --fs-body-lg:       1.125rem;                     /* 18     */
  --fs-body:          1rem;                         /* 16     */
  --fs-small:         0.875rem;                     /* 14     */
  --fs-caption:       0.75rem;                      /* 12     */

  --lh-display:       0.95;
  --lh-heading:       1.05;
  --lh-body:          1.55;
  --lh-tight:         1.2;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body:    0em;
  --tracking-caps:    0.08em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;
  --weight-black:     900;

  /* ── Spacing scale (4 px base) ───────────────────────────── */
  --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: 128px;
  --space-11: 192px;

  /* Layout */
  --container:        1280px;
  --gutter:           clamp(20px, 4vw, 48px);

  /* ── Radii ───────────────────────────────────────────────── */
  /* Mostly small — the brand is mostly square. Pills used for
     tags / chips / round buttons. */
  --radius-0:         0px;
  --radius-1:         4px;
  --radius-2:         8px;
  --radius-3:         12px;
  --radius-pill:      999px;
  --radius-dot:       999px;

  /* ── Borders ─────────────────────────────────────────────── */
  --bw-hair:          1px;
  --bw-1:             1.5px;
  --bw-2:             2px;
  --bw-3:             3px;

  /* ── Shadow / elevation ──────────────────────────────────── */
  /* Used sparingly. The brand leans on flat fills and ink
     borders, not drop-shadow stacks. */
  --shadow-sm:        0 1px 2px rgba(29, 30, 24, 0.06);
  --shadow-md:        0 6px 18px rgba(29, 30, 24, 0.08);
  --shadow-lg:        0 22px 48px rgba(29, 30, 24, 0.12);
  --shadow-ink:       4px 4px 0 var(--color-ink);     /* hard offset */
  --shadow-red:       4px 4px 0 var(--color-red);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:         cubic-bezier(.2, .8, .2, 1);
  --ease-in-out:      cubic-bezier(.65, 0, .35, 1);
  --dur-fast:         140ms;
  --dur-base:         220ms;
  --dur-slow:         420ms;
}

/* ── Element defaults ─────────────────────────────────────── */

html {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ── Type primitives ──────────────────────────────────────── */

.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: 62ch;
  text-wrap: pretty;
}

.body-lg  { font-size: var(--fs-body-lg);  line-height: var(--lh-body); }
.body-sm  { font-size: var(--fs-small);    line-height: var(--lh-body); }
.caption  { font-size: var(--fs-caption);  line-height: var(--lh-tight); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-accent);
  font-size: var(--fs-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: var(--bw-1);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

code, pre, kbd {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}

/* ── The dot — brand glyph ────────────────────────────────── */
/* Inline brand mark: a perfect red circle, baseline-aligned.
   Use in headings, hero copy, anywhere you want to plant the
   brand. <span class="dot"></span> or .dot::before */
.dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-radius: var(--radius-dot);
  background: var(--color-red);
  vertical-align: baseline;
  margin: 0 0.04em 0 0.04em;
  transform: translateY(-0.05em);
}