/* ── Global design tokens ─────────────────────────────
   Single source of truth for the warm-orange design system.
   Loaded in Base.astro before all other stylesheets.
   ──────────────────────────────────────────────────── */
:root {
  /* Brand accent */
  --color-accent: #C2410C;
  --color-accent-hover: #A63A0A;
  --color-orange: #FF731E;
  --color-orange-soft: #FFF1E8;

  /* Text */
  --color-ink: #1C1917;
  --color-ink-hover: #292524;
  --color-muted: #6B7280;
  --color-faint: #A8A29E;
  --color-fg-on-dark: #F6F2ED;
  --color-fg-on-dark-2: #CFC7BD;

  /* Surfaces */
  --color-bg: #FCFBF9;
  --color-bg-soft: #F4F0EA;
  --color-dark: #131110;
  --color-tile: #1C1917;

  /* Borders */
  --color-line: #E7E2DA;
  --color-line-soft: #e6eaec;

  /* Semantic */
  --color-success: #00875A;
  --color-warning: #8A5A00;
  --color-error: #C53E31;

  /* White */
  --color-white: #ffffff;

  /* ── Section rhythm ────────────────────────────────
     Vertical padding for a top-level page section.

     Why this exists: section padding used to be hard-coded per
     template (values ranged from 24px to 104px) with no shared
     scale, so the rhythm drifted page to page and most sections
     were never reduced for mobile. Remember that the gap a reader
     sees between two sections is the previous section's
     padding-BOTTOM plus the next one's padding-TOP — so the gap is
     roughly double the value below.

     New sections should use `padding: var(--section-pad-y) 0`
     rather than a hard-coded value. `public/mobile-responsive.css`
     applies --section-pad-y-mobile to the existing templates at
     <=768px; change it there and the whole site follows.
     ──────────────────────────────────────────────── */
  --section-pad-y: 5.5rem;         /* desktop default (~88px) */
  --section-pad-y-mobile: 2rem;    /* phones (~32px => ~64px between sections) */
}