/* =============================================================
   leenathan.com — Design Tokens
   Single source of truth for all design values.
   Update design-system.md when changing anything here.
   ============================================================= */

:root {
  /* --- Colors --- */
  --color-brand:     #6395EE; /* Cornflower  — links, accents, eyebrows      */
  --color-void:      #080C10; /* Void        — nav/footer dark mode           */
  --color-abyss:     #0D1117; /* Abyss       — dark content sections          */
  --color-midnight:  #1C2033; /* Midnight    — lifted sections dark mode      */
  --color-dusk:      #252D3D; /* Dusk        — nav/footer light mode          */
  --color-body:      #2C2C3E; /* Charcoal    — body text on light bg          */
  --color-muted:     #6B7280; /* Slate       — secondary text, labels         */
  --color-border:    #E5E7EB; /* Pale Gray   — borders, dividers              */
  --color-snow:      #FFFFFF; /* Snow        — page bg light mode             */
  --color-fog:       #F8F9FA; /* Fog         — lifted section bg light mode   */

  /* --- Typography --- */
  --font-serif: 'EB Garamond', serif;
  --font-sans:  'Inter', sans-serif;

  /* --- Layout --- */
  --nav-height:     3rem;
  --width-content:  860px;
  --width-blog:     720px;

  /* --- Radii --- */
  --radius-sm: 0.375rem; /* buttons, inputs, tags  */
  --radius-lg: 0.75rem;  /* cards                  */
  --radius-xl: 1rem;     /* form shell             */

  /* --- Spacing --- */
  --space-xs:  0.5rem;   /*  8px — tight gaps, inline        */
  --space-sm:  1rem;     /* 16px — component internal padding */
  --space-md:  1.5rem;   /* 24px — card padding, form gaps    */
  --space-lg:  2.5rem;   /* 40px — between components         */
  --space-xl:  4rem;     /* 64px — section padding (mobile)   */
  --space-2xl: 6rem;     /* 96px — section padding (desktop)  */

  /* --- Section Padding --- */
  /* Use these on <section> elements for consistent vertical rhythm */
  --section-py:       var(--space-xl);   /* default section top/bottom  */
  --section-py-hero:  var(--space-lg);   /* tighter for hero/header     */
  --section-px:       1.5rem;            /* horizontal page padding      */

  /* --- Transitions --- */
  --transition: 150ms ease;
}