/* =========================================================
   Another Boring Tech Blog — Paper of Record
   Tokens: colors · type · spacing · radii · rules
   Fonts: Source Serif 4 + JetBrains Mono (Google Fonts only)
   ========================================================= */

/* ---- Light (default — cool paper, not cream) ---- */
:root {
  color-scheme: light;

  /* Paper / ink */
  --paper:        #FCFCFC;
  --paper-sink:   #F2F3F4;
  --paper-elev:   #FFFFFF;

  --ink-1:        #0B0B0C;
  --ink-2:        #2A2B2E;
  --ink-3:        #5A5C62;
  --ink-4:        #8E9099;
  --ink-5:        #B7B9BE;

  /* Hairlines */
  --rule:         #D6D8DC;
  --rule-strong:  #9CA0A8;
  --rule-ink:     #1D1E20;

  /* Accent — deep cyan. Used sparingly: footnote markers,
     drop-cap, kicker, active ToC, destructive buttons. */
  --accent:       #0B6E9D;
  --accent-ink:   #074E72;
  --accent-soft:  #DDEAF4;

  /* Semantic (muted) */
  --note:         #1F4E4B;   /* deep teal */
  --note-soft:    #E3EEEC;
  --warn:         #8A5A00;   /* dark amber */
  --warn-soft:    #F4EBD5;

  /* Selection + marks */
  --marker:       #F1E5A8;   /* pale highlighter, no cream bg use */
  --selection:    #CFD9E2;

  /* Code slab — light, subtle tint */
  --code-paper:   #F6F7F8;
  --code-ink:     #0F1012;
  --code-rule:    #E4E6EA;
  --code-meta:    #8E9099;
  --code-kw:      #0B6E9D;
  --code-str:     #1F4E4B;
  --code-num:     #8A5A00;
  --code-com:     #6B7280;
  --code-var:     #0B0B0C;

  /* Depth — restrained, no glow */
  --shadow-1:     0 1px 0 rgba(11, 11, 12, 0.04);
  --shadow-2:     0 2px 12px rgba(11, 11, 12, 0.06);
  --shadow-3:     0 12px 48px rgba(11, 11, 12, 0.08);

  /* Type families */
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale (1.25 ratio, body anchored at 17px) */
  --fs-4xs: 9px;
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  17px;  /* body */
  --fs-lg:  19px;  /* dek / lead */
  --fs-xl:  22px;  /* h4 */
  --fs-2xl: 28px;  /* h3 */
  --fs-3xl: 36px;  /* h2 */
  --fs-4xl: 48px;  /* h1 */
  --fs-5xl: 64px;
  --fs-6xl: 88px;  /* masthead */

  /* Line height */
  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.5;
  --lh-body:   1.7;   /* long-form */

  /* Letter-spacing */
  --tr-smallcap: 0.14em;
  --tr-meta:     0.08em;
  --tr-display: -0.015em;
  --tr-masthead:-0.02em;

  /* Spacing (4px base) */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;
  --sp-4: 16px;   --sp-5: 20px;   --sp-6: 24px;
  --sp-7: 32px;   --sp-8: 40px;   --sp-9: 56px;
  --sp-10: 72px;  --sp-11: 96px;  --sp-12: 128px;

  /* Radii (sharp by default) */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;
  --r-3: 4px;
  --r-pill: 999px;

  /* Layout widths */
  --w-shell:     1400px;
  --w-container: 1120px;
  --w-prose:      660px;   /* optimal for serif body */
  --w-sidebar:    280px;
}

/* ---- Dark (inverted monograph — Penguin Classic at night) ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #0F0F10;
  --paper-sink:   #17181A;
  --paper-elev:   #191A1C;

  --ink-1:        #EDEAE2;  /* bone */
  --ink-2:        #C6C3BC;
  --ink-3:        #8E8C86;
  --ink-4:        #5F5D58;
  --ink-5:        #3C3B37;

  --rule:         #2A2A2C;
  --rule-strong:  #45464A;
  --rule-ink:     #C6C3BC;

  --accent:       #78C8E8;
  --accent-ink:   #9FD8EC;
  --accent-soft:  #0A2736;

  --note:         #7BC9BC;
  --note-soft:    #14251F;
  --warn:         #E0B458;
  --warn-soft:    #28200E;

  --marker:       #5A4E20;
  --selection:    #2A3644;

  --code-paper:   #0A0A0B;
  --code-ink:     #E9E6DE;
  --code-rule:    #232325;
  --code-meta:    #6B6B66;
  --code-kw:      #78C8E8;
  --code-str:     #7BC9BC;
  --code-num:     #E0B458;
  --code-com:     #6B6E72;
  --code-var:     #EDEAE2;

  --shadow-1:     0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-2:     0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-3:     0 12px 48px rgba(0, 0, 0, 0.7);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink-1);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "onum"; /* old-style figs in prose */
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--ink-1); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.18em;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

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

/* ---- Type classes ---- */

.type-masthead {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  /* min lowered from 44px to 28px — at 44px the wordmark overflowed iPhone /
     small-Android viewports (360–430 px). 28px keeps it on one line down to
     320 px with our italic 900 weight + -0.02em tracking. */
  font-size: clamp(28px, 7.5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-masthead);
  font-variant-numeric: lining-nums;
}

.type-display {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-wrap: pretty;
}

.type-h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.type-h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.type-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.type-h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-style: italic;
}

.type-dek {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  text-wrap: pretty;
}

.type-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--ink-1);
  text-wrap: pretty;
}

.type-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.type-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

.type-smallcap {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
}

.type-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-smallcap);
  text-transform: uppercase;
  color: var(--ink-3);
}

.type-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.type-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

.type-dropcap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: calc(var(--fs-md) * 4.6);
  line-height: 0.88;
  padding: 0.08em var(--sp-3) 0 0;
  margin: 0.06em 0 0 0;
  color: var(--accent);
  font-feature-settings: "lnum";
}

.is-italic { font-style: italic; }
.is-accent { color: var(--accent); }
.is-muted  { color: var(--ink-3); }
.is-quiet  { color: var(--ink-4); }