/* =========================================================
   Sofie Wolik — Colors & Type
   Source of truth for color tokens, type scale, and base styles.
   ========================================================= */

/* ---------- Webfonts ----------
   Display:  Caprasimo            — warm, bold, rounded display
                                    (matches the "nick lewis" / "Making design fun" reference)
   Body:     Geist                — clean modern sans for body
   Script:   Caveat               — "Hey there" handwritten accent
   Mono:     JetBrains Mono       — eyebrows, micro-labels
*/
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=Shadows+Into+Light&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== Brand palette (from jpg(1)) ===== */
  --magical-moonlight: #F0EEEB;   /* Primary background — warm cream */
  --polar-drift:       #CCD5DA;   /* Cool neutral */
  --sea-buckthorn:     #FFBF65;   /* Warm gold */
  --miami-coral:       #FD8973;   /* Coral / accent */
  --ateneo-blue:       #003A6C;   /* Deep blue — primary text/ink */
  --neverything:       #13181B;   /* Near-black */

  /* ===== Surface ===== */
  --surface:           #F0EEEB;   /* Magical Moonlight */
  --surface-2:         #FFFFFF;   /* Pure white card */
  --surface-3:         #E8E5E0;   /* Slightly deeper cream */
  --surface-ink:       #13181B;   /* Dark surface */
  --surface-blue:      #003A6C;

  /* ===== Foreground ===== */
  --fg-1:              #0A0D10;   /* Primary ink — darker for max contrast on cream */
  --fg-2:              #003A6C;   /* Deep blue ink (display) */
  --fg-3:              #2C353F;   /* Secondary text — darker than before */
  --fg-4:              #4A5560;   /* Tertiary / meta */
  --fg-on-dark:        #F0EEEB;
  --fg-on-blue:        #F0EEEB;

  /* ===== Accents ===== */
  --accent-coral:      #FD8973;
  --accent-gold:       #FFBF65;
  --accent-blue:       #003A6C;
  --accent-script:     #FD8973;   /* Color used for handwritten accent strokes */

  /* ===== Borders / hairlines ===== */
  --border-1:          rgba(19, 24, 27, 0.10);
  --border-2:          rgba(19, 24, 27, 0.18);
  --border-strong:     rgba(19, 24, 27, 0.85);
  --border-on-dark:    rgba(240, 238, 235, 0.18);

  /* ===== Semantic ===== */
  --link:              #003A6C;
  --link-hover:        #FD8973;
  --highlight:         #FFBF65;     /* underline / marker highlight */
  --selection-bg:      #FFBF65;
  --selection-fg:      #13181B;

  /* ===== Type families ===== */
  --font-display: "Nunito", Calibri, "Söhne", system-ui, sans-serif;
  --font-body:    "Nunito", Calibri, -apple-system, "Helvetica Neue", sans-serif;
  --font-script:  "Shadows Into Light", "Homemade Apple", cursive;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ===== Type scale (modular, slightly tightened) ===== */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  17px;     /* slightly above 16 — premium reading feel */
  --fs-md:    19px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   84px;
  --fs-6xl:   112px;

  /* ===== Line heights ===== */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-display: 1.05;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* ===== Letter-spacing ===== */
  --tr-display: -0.025em;
  --tr-tight:   -0.015em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.18em;

  /* ===== Spacing scale (4px base) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===== Radius ===== */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ===== Shadow / elevation ===== */
  --shadow-1: 0 1px 2px rgba(19, 24, 27, 0.06);
  --shadow-2: 0 4px 14px rgba(19, 24, 27, 0.08);
  --shadow-3: 0 12px 32px rgba(19, 24, 27, 0.10);
  --shadow-4: 0 24px 60px rgba(19, 24, 27, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(19, 24, 27, 0.06);

  /* ===== Motion ===== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.05, 0.6, 0.2);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ===== Layout ===== */
  --container:  1180px;
  --container-narrow: 720px;
  --measure:    62ch;
}

/* ===========================================================
   Base element styles  (semantic application of tokens)
   =========================================================== */

html, body {
  background: var(--surface);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Display — used for hero headlines */
.h-display, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-2);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-2);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--fg-1);
}

p, li {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: var(--measure);
  text-wrap: pretty;
}

small, .meta {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Eyebrow — small caps lockup above headlines */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-3);
}

/* Script accent — "Hey there", "PS", signatures, tags */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--accent-coral);
  font-size: 1.4em;
  line-height: 1;
}

/* Inline code / mono */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-2);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }

hr {
  border: 0;
  height: 1px;
  background: var(--border-1);
  margin: var(--space-12) 0;
}

/* Highlight underline — the "marker" stroke under display words */
.marker {
  background-image: linear-gradient(transparent 62%, var(--highlight) 62%, var(--highlight) 92%, transparent 92%);
  padding: 0 0.05em;
}

/* Hand-drawn underline — for words like "Hey Friends" in Ali Abdaal ref */
.underline-hand {
  position: relative;
  display: inline-block;
}
.underline-hand::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.18em;
  height: 0.22em;
  background: var(--accent-coral);
  border-radius: 999px;
  transform: rotate(-1.2deg);
  opacity: 0.85;
}