/* =============================================================================
   Personal MD Design System — Colors & Type
   Anchor: dark navy. Aesthetic: GitBook-clean, function-first, data-aware.
   ============================================================================= */

/* ----- FONTS ---------------------------------------------------------------- */
/* Substitutions in use (flagged to user):
   - Display/body sans: Inter Tight (clean, neutral, well-tested for product UI)
   - Editorial serif:   Source Serif 4 (academic, calm, readable at body sizes)
   - Mono / data:       JetBrains Mono (R/code/tabular feel)
   These are loaded from Google Fonts in each HTML file.
*/

:root {
  /* ===== COLOR — RAW SCALES =============================================== */
  /* Navy (the anchor). Dense, deep, slightly cool. */
  --navy-50:  #F2F5FA;
  --navy-100: #DCE3F0;
  --navy-200: #B6C3DD;
  --navy-300: #8093BD;
  --navy-400: #4F6699;
  --navy-500: #2C4476;
  --navy-600: #1B3160;   /* primary */
  --navy-700: #142450;
  --navy-800: #0E1A3D;
  --navy-900: #08112A;
  --navy-950: #050A1C;

  /* Neutral / paper. Warm-leaning off-white. Cool slate text. */
  --paper:    #FBFAF7;   /* page background — barely-warm off-white */
  --paper-2:  #F4F2EC;   /* subtle panel tint */
  --line:     #E5E2DA;   /* hairlines on paper */
  --line-2:   #D5D1C5;

  --slate-50:  #F6F7F9;
  --slate-100: #ECEEF2;
  --slate-200: #D9DDE5;
  --slate-300: #B6BCC9;
  --slate-400: #828A9C;
  --slate-500: #5A6273;
  --slate-600: #3E4555;
  --slate-700: #272C39;
  --slate-800: #161A24;
  --slate-900: #0B0E16;

  /* Accent — graph/data hue. Used sparingly: links, charts, highlights. */
  --accent-50:  #E6F1F4;
  --accent-200: #A8CDD7;
  --accent-400: #4E94A6;
  --accent-500: #2E7787;   /* deep teal */
  --accent-700: #1B5263;

  /* Semantic */
  --success:  #2F7A4D;
  --success-bg: #E7F1EB;
  --warning:  #B27017;
  --warning-bg: #F6EBD6;
  --danger:   #A2362A;
  --danger-bg:  #F4DEDA;
  --info:     var(--accent-500);
  --info-bg:  var(--accent-50);

  /* ===== SEMANTIC ROLES =================================================== */
  --bg:           var(--paper);
  --bg-2:         var(--paper-2);
  --bg-inverse:   var(--navy-800);
  --surface:      #FFFFFF;
  --surface-sunk: var(--paper-2);

  --fg-1:         var(--navy-900);    /* headlines, primary text */
  --fg-2:         var(--slate-700);   /* body */
  --fg-3:         var(--slate-500);   /* secondary / meta */
  --fg-4:         var(--slate-400);   /* placeholder / disabled */
  --fg-on-navy:   #EAEEF7;
  --fg-on-navy-2: #A9B4CE;

  --border:       var(--line);
  --border-strong: var(--line-2);
  --border-on-navy: rgba(255,255,255,0.10);

  --link:         var(--navy-600);
  --link-hover:   var(--navy-800);
  --focus-ring:   var(--accent-400);

  /* Brand */
  --brand:        var(--navy-700);
  --brand-ink:    var(--navy-900);
  --brand-on:     #FFFFFF;

  /* ===== TYPE ============================================================= */
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular scale, 1.200 (minor third). Calm, GitBook-y. */
  --fs-xs:    12px;
  --fs-sm:    13.5px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    21px;
  --fs-xl:    25px;
  --fs-2xl:   30px;
  --fs-3xl:   36px;
  --fs-4xl:   44px;
  --fs-5xl:   56px;
  --fs-6xl:   72px;

  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.55;
  --lh-relaxed: 1.70;

  --tracking-tight: -0.018em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.10em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ===== SPACING ========================================================= */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ===== RADII =========================================================== */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;     /* default for cards/inputs — restrained, GitBook-like */
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ===== ELEVATION ======================================================= */
  /* Function-first: shadows are subtle, never decorative.                   */
  --shadow-1: 0 1px 0 rgba(8, 17, 42, 0.04);
  --shadow-2: 0 1px 2px rgba(8, 17, 42, 0.06), 0 1px 1px rgba(8, 17, 42, 0.04);
  --shadow-3: 0 4px 14px rgba(8, 17, 42, 0.08), 0 1px 2px rgba(8, 17, 42, 0.05);
  --shadow-pop: 0 12px 32px rgba(8, 17, 42, 0.16), 0 2px 6px rgba(8, 17, 42, 0.08);
  --inset-line: inset 0 0 0 1px var(--border);

  /* ===== MOTION ========================================================== */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ===== LAYOUT ========================================================== */
  --content-narrow: 680px;
  --content:        880px;
  --content-wide:   1120px;
  --content-max:    1280px;
}

/* ----- SEMANTIC TYPOGRAPHY -------------------------------------------------- */

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

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: var(--s-12) 0 var(--s-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: var(--s-8) 0 var(--s-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: var(--s-6) 0 var(--s-2);
}

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-6xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-style: italic;   /* serif italic for display moments only */
}

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

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

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

code, .code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: var(--navy-800);
}

pre {
  background: var(--navy-900);
  color: var(--fg-on-navy);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  overflow: auto;
  line-height: var(--lh-normal);
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--link) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

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

::selection {
  background: var(--navy-200);
  color: var(--navy-900);
}