/*
 * tokens.css
 * ReyBelen Standalone Theme — CSS Custom Properties
 *
 * Authority: REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §03 (Color)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §02 (Typography)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §04 (Grid)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §06 (Spacing)
 *
 * Single source of truth for all design tokens.
 * No component CSS. No selectors beyond :root.
 * All other CSS files consume these tokens — they do not define values.
 */

:root {

  /* ── Color: Structural Palette ──────────────────────────────────────────── */

  --rb-navy:       #0D1B2A;   /* Primary dark surface — hero, authority break, quote, CTA, footer body */
  --rb-navy-mid:   #162436;   /* Footer body, dark sub-surfaces within navy sections */
  --rb-bg:         #F5F0E8;   /* Only light surface — all light sections, article body, archive listing */
  --rb-cognac:     #A0522D;   /* Single accent — CTAs, eyebrow labels, link arrows, category tags */

  /* ── Color: Derived Supports ─────────────────────────────────────────────── */

  --rb-cognac-lt:  #C4652F;   /* Cognac lightened — hero display emphasis, inline highlights on dark surfaces only */
  --rb-ink:        #111827;   /* All text on light surfaces — headings and body; near-black, never grey */
  --rb-text-meta:  #6B7280;   /* Metadata only — dates, read times, card numbers, captions; never paragraph text */
  --rb-border:     #E4E1DA;   /* Dividers, article row separators, card border-bottom */

  /* ── Typography: Font Families ───────────────────────────────────────────── */

  --rb-font-heading: 'Fraunces', Georgia, serif;
  --rb-font-mono:    'DM Mono', 'Courier New', monospace;
  --rb-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

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

  --rb-max-w:    1120px;   /* Maximum content container width — fixed architectural constant */
  --rb-pad-h:    48px;     /* Container horizontal padding — desktop */
  --rb-pad-h-m:  24px;     /* Container horizontal padding — mobile */

  /* ── Spacing: 8px Base Scale ─────────────────────────────────────────────── */

  --sp-1:   8px;    /* Tight gaps between related inline elements */
  --sp-2:  16px;    /* Component internal padding, label-to-content gaps */
  --sp-3:  24px;    /* Standard component padding, nav element spacing */
  --sp-4:  32px;    /* Section internal spacing, card padding, stacked item gaps */
  --sp-5:  40px;    /* Between --sp-4 and --sp-6; descriptor-to-CTAs gap; proof item gap */
  --sp-6:  48px;    /* Container horizontal padding, generous internal spacing */
  --sp-7:  56px;    /* Mobile section padding floor */
  --sp-8:  64px;    /* Moderate section vertical padding, two-column grid gap */
  --sp-9:  72px;    /* — */
  --sp-10: 80px;    /* Standard section vertical padding — light sections */
  --sp-11: 88px;    /* — */
  --sp-12: 96px;    /* Feature section vertical padding — hero, CTA, authority break, quote */

}