/* ============================================================
   DESIGN TOKENS — single source of truth for the whole site.

   The brand palette and type voices live here and nowhere else.
   Change a value in this file and every page updates. Every other
   stylesheet references these variables — it never hard-codes a
   colour or a font name.

   Scheme: NYT colorway on a Substack-style profile layout — white
   page, #121212 text, thin grey rules, navy links; Cheltenham-style
   serif headlines (Domine), Georgia for body AND labels/tabs
   (uniform type), blackletter nameplate.
   ============================================================ */
:root {
  /* ---- Brand palette — NYT colorway -------------------------- */
  --color-background: #ffffff;  /* page background — white            */
  --color-text:       #121212;  /* body + headings — NYT text black   */
  --color-primary:    #121212;  /* primary UI / strong marks          */
  --color-accent:     #326891;  /* links, Subscribe — NYT navy blue   */
  --color-surface:    #f7f7f7;  /* cards, chips, inputs — light grey  */

  /* ---- Type voices ------------------------------------------- */
  --font-heading: "Domine", Georgia, "Times New Roman", serif;         /* content headlines — NYT Cheltenham-like */
  --font-body:    Georgia, "Times New Roman", serif;                   /* body — NYT web voice, system font */
  --font-sans:    var(--font-body);                                    /* labels/tabs share the body serif — uniform type */
  --font-gothic:  "UnifrakturMaguntia", cursive;                       /* nameplate */

  /* ============================================================
     Everything below is DERIVED from the tokens above — no new
     brand values. Existing rules reference these aliases.
     ============================================================ */

  /* Semantic colours (derived with color-mix from the palette) */
  --bg:       var(--color-background);
  --bg-alt:   var(--color-surface);
  --text:     var(--color-text);
  --text-dim: color-mix(in srgb, var(--color-text) 68%, var(--color-background));
  --accent:   var(--color-accent);
  --accent-h: color-mix(in srgb, var(--color-accent) 70%, var(--color-text));
  --border:   color-mix(in srgb, var(--color-text) 12%, var(--color-background));
  --border-h: color-mix(in srgb, var(--color-text) 28%, var(--color-background));

  /* Font aliases used throughout style.css */
  --font-serif:   var(--font-body);
  --font-display: var(--font-heading);
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Functional colours that sit outside the brand palette */
  --color-success: #4d7c43;                       /* "copied" confirmations */
  --overlay-bg:    rgba(0, 0, 0, 0.92);           /* lightbox backdrop */
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.35); /* lightbox image shadow */

  /* ---- Layout ----------------------------------------------- */
  --text-width:    748px;
  /* Page shell / home grid canvas. Responsive so the fixed right-edge
     social icons never collide (always ≥4rem outer margin). */
  --layout-width:  min(1200px, calc(100vw - 8rem));
  /* Post reading column — half the layout canvas */
  --post-width:    min(600px, calc(100vw - 4rem));
  --note-width:    150px;
  --note-gap:      2rem;
  --content-width: calc(var(--text-width) + var(--note-gap) + var(--note-width));
  --page-width:    calc(var(--layout-width) + 6rem);
}