/* ── Texas Dispatch — Design Tokens ──────────────────────────────────────── */

:root {
    /* Typography */
    --font-display: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
    --font-serif: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:  'JetBrains Mono', 'Courier New', monospace;

    /* Brand Colors */
    --navy:       #262626;
    --red:        #C7413F;
    --white:      #FFFFFF;
    --offwhite:   #FFF3E3;
    --gray-light: #DEE2DC;
    --gray-mid:   #767676;
    --gray-dark:  #2C2C2C;
    --black:      #262626;

    /* New Brand Tokens */
    --charcoal:   #262626;
    --sage:       #DEE2DC;
    --cream:      #FFF3E3;
    --brand-red:  #C7413F;

    /* Category Colors */
    --cat-water:          #262626;
    --cat-economy:        #262626;
    --cat-health-care:    #262626;
    --cat-education:      #262626;
    --cat-opinion:        #262626;
    --cat-cost-of-living: #C7413F;
    --cat-under-the-dome: #262626;
    --cat-agencies:       #37474F;
    --cat-top-issues:     #C7413F;

    /* Spacing Scale (4px base) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;

    /* Layout */
    --max-width:      1200px;
    --sidebar-width:  280px;
    --gutter:         24px;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 6px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);

    /* Transitions */
    --transition: 300ms ease;

    /* Nav Heights */
    --utility-bar-height: 40px;
    --nav-height:         56px;
}