@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

  /* ── Colors ───────────────────────────────────────────── */

  --color-accent:      #1a1aff;
  --color-ink:         #0f0f0f;
  --color-ink-2:       #444;
  --color-ink-3:       #888;
  --color-paper:       #fafaf8;
  --color-rule:        #e2e2e2;
  --color-locked-bg:   #f5f4f1;
  --color-partner-bg:  #fffef9;

  /* ── Fonts ────────────────────────────────────────────── */

  --font-display: 'Playfair Display', serif;
  --font-sans:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* ── Font weights ─────────────────────────────────────── */

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

  /* ── Type scale ───────────────────────────────────────── */
  /*    Named after px equivalents at 16px root              */

  --text-11: 0.6875rem;   /* 11px — fine print, labels      */
  --text-12: 0.75rem;     /* 12px — mono captions, badges   */
  --text-13: 0.8125rem;   /* 13px — secondary meta          */
  --text-14: 0.875rem;    /* 14px — body sm, card excerpts  */
  --text-16: 1rem;        /* 16px — base body               */
  --text-18: 1.125rem;    /* 18px — lead / deck             */
  --text-20: 1.25rem;     /* 20px — card titles             */
  --text-24: 1.5rem;      /* 24px — section headings        */
  --text-30: 1.875rem;    /* 30px — article titles (mobile) */
  --text-36: 2.25rem;     /* 36px — article titles          */
  --text-48: 3rem;        /* 48px — hero headings           */
  --text-60: 3.75rem;     /* 60px — display / masthead      */

  /* ── Line heights ─────────────────────────────────────── */

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── Letter spacing ───────────────────────────────────── */

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* ── Spacing scale ────────────────────────────────────── */
  /*    4px base unit                                        */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ───────────────────────────────────────────── */

  --max-width:         1200px;   /* outer site container    */
  --max-width-content:  720px;   /* article / prose column  */
  --sidebar-width:      272px;   /* right rail              */
  --nav-height:          56px;   /* sticky nav bar          */
  --gutter:            var(--space-6);

  /* ── Border ───────────────────────────────────────────── */

  --border: 1px solid var(--color-rule);

  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl: 12px;

  /* ── Shadows ──────────────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.09);
  --shadow-lg: 0 8px 24px rgba(15, 15, 15, 0.12);

  /* ── Transitions ──────────────────────────────────────── */

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

}