/* ============================================================
   Dynamic Skillset — Colors & Type
   Built on the Nord palette (https://www.nordtheme.com/)
   Brand primary: a slightly deeper take on Nord's Frost blues,
   sampled from the logo (#2C5A8C).
   ============================================================ */

/* Site fonts: Lora (serif) + DM Sans (sans) — sourced from Bunny Fonts, the same provider the live site uses. JetBrains Mono added for code samples (the live site doesn't use mono). */
@import url("https://fonts.bunny.net/css?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Nord — Polar Night (dark neutrals) ---------- */
  --nord0:  #2E3440;  /* darkest */
  --nord1:  #3B4252;
  --nord2:  #434C5E;
  --nord3:  #4C566A;

  /* ---------- Nord — Snow Storm (light neutrals) ---------- */
  --nord4:  #D8DEE9;
  --nord5:  #E5E9F0;
  --nord6:  #ECEFF4;

  /* ---------- Nord — Frost (cool blues / teal) ---------- */
  --nord7:  #8FBCBB;  /* dim teal */
  --nord8:  #88C0D0;  /* light blue */
  --nord9:  #81A1C1;  /* mid blue */
  --nord10: #5E81AC;  /* deep blue */

  /* ---------- Nord — Aurora (semantic accents) ---------- */
  --nord11: #BF616A;  /* red    — danger / error */
  --nord12: #D08770;  /* orange — warning */
  --nord13: #EBCB8B;  /* yellow — caution / highlight */
  --nord14: #A3BE8C;  /* green  — success */
  --nord15: #B48EAD;  /* purple — accent */

  /* ---------- Brand ---------- */
  --brand:           #2C5A8C;   /* sampled from logo */
  --brand-hover:     #3A6FA5;   /* lighter than brand on hover */
  --brand-press:     #244B78;   /* deeper for active/pressed */
  --brand-tint:      #E8EEF5;   /* very pale wash */

  /* ---------- Semantic surfaces ---------- */
  --bg:              #FFFFFF;
  --bg-muted:        var(--nord6);
  --bg-sunken:       var(--nord5);
  --surface:         #FFFFFF;
  --surface-raised:  #FFFFFF;

  /* ---------- Semantic text ---------- */
  --fg-1:            var(--nord0);   /* primary body text */
  --fg-2:            var(--nord2);   /* secondary text */
  --fg-3:            var(--nord3);   /* tertiary / muted */
  --fg-on-brand:     #FFFFFF;
  --fg-link:         var(--brand);
  --fg-link-hover:   var(--brand-hover);

  /* ---------- Borders / dividers ---------- */
  --border-subtle:   var(--nord5);
  --border-default:  var(--nord4);
  --border-strong:   #C3CCD9;

  /* ---------- Semantic states ---------- */
  --success:         var(--nord14);
  --success-tint:    #EAF1E2;
  --warning:         var(--nord12);
  --warning-tint:    #F8E7DD;
  --danger:          var(--nord11);
  --danger-tint:     #F2DDDF;
  --info:            var(--nord10);
  --info-tint:       #E3EAF3;

  /* ---------- Type families ---------- */
  --font-sans:   "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif:  "Lora", Georgia, "Times New Roman", serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (modular ~1.2) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;        /* base */
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Letter spacing ---------- */
  --ls-tight:  -0.015em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

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

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Shadows (cool-tinted, restrained) ---------- */
  --shadow-xs: 0 1px 1px rgba(46, 52, 64, 0.06);
  --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.08), 0 1px 1px rgba(46, 52, 64, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(46, 52, 64, 0.10), 0 2px 4px -2px rgba(46, 52, 64, 0.06);
  --shadow-lg: 0 12px 24px -8px rgba(46, 52, 64, 0.14), 0 4px 8px -4px rgba(46, 52, 64, 0.06);

  /* ---------- Layout ---------- */
  --content-narrow: 640px;
  --content-default: 768px;
  --content-wide: 1080px;
  --content-max: 1200px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   Element-level defaults — semantic styles
   ============================================================ */

html { font-size: 17px; }
@media (min-width: 768px) { html { font-size: 18px; } }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2vw, var(--fs-60)); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, var(--fs-36)); }
h3 { font-size: var(--fs-24); font-weight: 600; }
h4 { font-size: var(--fs-20); }
h5 { font-size: var(--fs-18); font-family: var(--font-sans); font-weight: 600; }
h6 {
  font-size: var(--fs-12);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

p { margin: 0 0 1em; text-wrap: pretty; max-width: 68ch; }

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); }

small { font-size: var(--fs-14); color: var(--fg-2); }

strong, b { font-weight: 700; color: var(--fg-1); }
em, i { font-style: italic; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  color: var(--nord1);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background: var(--nord0);
  color: var(--nord6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  overflow-x: auto;
  line-height: var(--lh-normal);
}
pre code { background: transparent; padding: 0; color: inherit; }

blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--brand);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-2);
  font-size: var(--fs-18);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--sp-8) 0;
}

ul, ol { padding-left: 1.4em; margin: 0 0 1em; }
li { margin: 0.25em 0; }

::selection { background: var(--brand-tint); color: var(--brand-press); }

/* Utility eyebrow */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand);
}