/* ============================================
   DESIGN TOKENS
   Shared across every page. Change the look of
   the whole site by editing values here only.
   ============================================ */

:root {
    /* Brand colors */
    --color-red: #dc2626;
    --color-red-dark: #b91c1c;
    --color-red-light: #fca5a5;
    --color-gold: #f6bd50;
    --color-gold-light: #f9c975;
    --color-gold-dark: #e0aa3a;
    --color-brown: #92400e;
    --color-cream: #fdf6e3;

    /* Neutrals */
    --color-black: #111827;
    --color-dark: #374151;
    --color-gray: #6b7280;
    --color-white: #ffffff;

    /* Text */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #d1d5db;

    /* Shadows */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-brand: 0 4px 14px 0 rgba(246, 189, 80, 0.25);

    /* Fonts */
    --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Press Start 2P', monospace;

    /* Layout: logo.png is 415x246, so a 146px-wide cap renders at ~87px tall.
       87px logo + 0.4rem top/bottom padding + 4px header border.
       Only the desktop (>=1300px) height matters here — that's the only
       breakpoint where the sidebar is sticky and needs to align under it. */
    --header-height: 103px;
    --sidebar-width: 260px;
    --content-max-width: 1400px;
}