/* ============================================================
   Doug's Dharma — Design tokens
   Load Gentium Book Plus + Inter + JetBrains Mono from Google
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Palette ------------------------------------- */
  --night:            #122d48;  /* primary deep navy */
  --night-soft:       #1a3a5b;  /* a touch lighter for layered panels on night */
  --ink:              #0b1c2c;  /* darkest, type on ivory */
  --stillwater:       #7fa0a2;  /* dusty blue-grey (main secondary) */
  --stillwater-deep:  #649b9b;  /* richer teal (patreon panel variant) */
  --stillwater-soft:  #a8c0c1;
  --parchment:        #d7d2c8;  /* cream linework */
  --ivory:            #efeae0;  /* warm page background */
  --ivory-deep:       #e3dccf;
  --smoke:            #52585e;  /* muted body on ivory */
  --mist:             #8a8f95;  /* captions / tertiary */
  --ember:            #f06e32;  /* book-cover accent, use sparingly */
  --ember-deep:       #d55a22;
  --white-true:       #ffffff;  /* use almost never */

  /* Semantic foreground / background */
  --fg-1:             var(--ink);        /* primary text on light */
  --fg-2:             var(--smoke);      /* secondary */
  --fg-3:             var(--mist);       /* tertiary, captions */
  --fg-inv-1:         var(--parchment);  /* primary text on night */
  --fg-inv-2:         rgba(215,210,200,0.72);
  --fg-inv-3:         rgba(215,210,200,0.48);

  --bg-1:             var(--ivory);      /* primary surface, light */
  --bg-2:             var(--ivory-deep); /* secondary surface */
  --bg-inv-1:         var(--night);
  --bg-inv-2:         var(--night-soft);
  --bg-tonal:         var(--stillwater);

  --accent:           var(--ember);

  --border-on-light:  rgba(11, 28, 44, 0.08);
  --border-on-dark:   rgba(215, 210, 200, 0.15);
  --border-strong-light: rgba(11, 28, 44, 0.18);

  /* ---------- Typography --------------------------------- */
  --font-display:     'Gentium Book Plus', 'Gentium Plus', 'EB Garamond', Georgia, serif;
  --font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Type scale — modular ~1.2 with breakpoints in the big end */
  --text-xs:          12px;
  --text-sm:          14px;
  --text-base:        16px;
  --text-md:          18px;
  --text-lg:          20px;
  --text-xl:          24px;
  --text-2xl:         32px;
  --text-3xl:         44px;
  --text-4xl:         60px;
  --text-5xl:         80px;
  --text-6xl:         104px;

  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.16em;

  /* ---------- Spacing (8pt base) ------------------------- */
  --space-0:  0;
  --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;

  /* ---------- Radii -------------------------------------- */
  --radius-0:   0;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ---------- Elevation (quiet) -------------------------- */
  --shadow-0:   none;
  --shadow-1:   0 1px 2px rgba(11, 28, 44, 0.04);
  --shadow-2:   0 2px 12px rgba(11, 28, 44, 0.08);
  --shadow-3:   0 8px 28px rgba(11, 28, 44, 0.10);
  --shadow-lift: 0 12px 40px rgba(11, 28, 44, 0.14);

  /* ---------- Motion ------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;

  /* ---------- Layout ------------------------------------- */
  --measure:        68ch;
  --container:      1180px;
  --container-narrow: 780px;
  --nav-h:          64px;
  --nav-h-mobile:   56px;
}

/* ------------------------------------------------------------
   Semantic element styles — include this stylesheet on a page
   to get the brand's typographic defaults for free
   ------------------------------------------------------------ */

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

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0;
}

h1, .h1 { font-size: var(--text-4xl); font-weight: 500; }
h2, .h2 { font-size: var(--text-3xl); font-weight: 500; }
h3, .h3 { font-size: var(--text-2xl); font-weight: 500; line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-xl);  font-weight: 600; line-height: var(--leading-snug); }

.display-xl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-6xl);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  max-width: var(--measure);
  margin: 0;
}

.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-2);
  font-weight: 400;
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

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

blockquote, .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--stillwater);
  padding-left: var(--space-6);
  margin: 0;
}

a {
  color: var(--ember-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.78; }

/* dark-surface overrides */
.on-night, .on-night * { color: var(--fg-inv-1); }
.on-night h1, .on-night h2, .on-night h3, .on-night h4,
.on-night .display, .on-night .display-xl { color: var(--parchment); }
.on-night p { color: var(--fg-inv-2); }
.on-night .caption, .on-night small { color: var(--fg-inv-3); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}