/* =========================================================
   Zuzana Hrusovska Portfolio — Foundations
   Typography (Space Grotesk + Inter) and Color tokens
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (raw) */
  --color-primary-blue:    #000B34;  /* near-black navy — text, hero, primary buttons */
  --color-secondary-grey:  #979797;  /* secondary text, captions, meta */
  --color-tertiary-grey:   #D8D8D8;  /* hairlines, dividers, disabled */
  --color-grey-bg:         #F2F2F2;  /* page background tint, image placeholders */
  --color-white:           #FFFFFF;  /* default page background */
  --color-green:           #8AE78F;  /* highlight / accent */
  --color-green-60:        rgba(138, 231, 143, 0.6); /* soft highlight on text */
  --color-green-80:        rgba(138, 231, 143, 0.8); /* soft highlight for small text */

  /* Semantic — foreground */
  --fg-primary:   var(--color-primary-blue);
  --fg-secondary: var(--color-secondary-grey);
  --fg-muted:     var(--color-tertiary-grey);
  --fg-on-dark:   var(--color-white);

  /* Semantic — background */
  --bg-page:      var(--color-white);
  --bg-subtle:    var(--color-grey-bg);
  --bg-dark:      var(--color-primary-blue);
  --bg-accent:    var(--color-green);

  /* Semantic — borders & dividers */
  --border-hairline: var(--color-tertiary-grey);
  --border-strong:   var(--color-primary-blue);

  /* Accent / highlight */
  --highlight-bg:        var(--color-green-60);
  --highlight-bg-solid:  var(--color-green);

  /* Typography families */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  --font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;

  /* Type scale (desktop) */
  --fs-closer:  64px;   /* CTA closer — "Do you want to chat?" */
  --fs-display: 40px;   /* Hero claim */
  --fs-h1:      32px;   /* Section heads — My work, About me */
  --fs-h2:      32px;   /* Same level as H1 in this brand */
  --fs-h3:      24px;   /* Case-study titles */
  --fs-h4:      20px;   /* Sub-titles */
  --fs-eyebrow-display: 28px;  /* "Hi, I'm Zuzana" greeting */
  --fs-body:    16px;   /* paragraph */
  --fs-small:   14px;   /* meta / nav */
  --fs-xsmall:  12px;   /* eyebrow / label, uppercase */

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-loose:   1.65;

  /* Letter spacing */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.08em;

  /* Spacing scale (8pt-ish) */
  --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;

  /* Radii — only two: 0 (default, including images) and 8px (buttons + floating nav). */
  --radius-none: 0px;
  --radius-md:   8px;

  /* Shadows — only used for the floating nav bar; everything else is flat. */
  --shadow-none:  none;
  --shadow-float: 0 1px 0 rgba(0, 11, 52, 0.04), 0 8px 24px rgba(0, 11, 52, 0.08);

  /* Layout */
  --container-max: 1200px;
  --gutter:        24px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
.closer {
  font-family: var(--font-display);
  font-size: var(--fs-closer);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

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

.eyebrow-display {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--fg-secondary);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: var(--lh-snug);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: var(--lh-snug);
}

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

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

.small, small {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--fg-secondary);
}

.eyebrow, .label {
  font-family: var(--font-body);
  font-size: var(--fs-xsmall);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}
a:hover { text-decoration-thickness: 2px; }

/* The signature "marker highlight" — words wrapped in <mark> get a solid
   green swipe rotated slightly behind the text. */
mark, .mark {
  position: relative;
  display: inline-block;
  color: inherit;
  padding: 0 4px;
  isolation: isolate;
  background: transparent;
}
mark::before, .mark::before {
  content: "";
  position: absolute;
  inset: 6% 2px;
  background: var(--color-green-80);
  transform: rotate(-3deg);
  z-index: -1;
}

/* Secondary highlight — thick wavy underline. Apply with class="wavy"
   on the span/word that should get it. The SVG repeats so the wave stays
   consistent across font sizes. */
.wavy {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'><path d='M0 3 Q 4 0 8 3 T 16 3' fill='none' stroke='%23000B34' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 16px 6px;
  padding-bottom: 2px;
}