/* CSS Custom Properties - Color Palette and Design Tokens */
:root {
    /* Primary Colors */
    --black: #000000;
    --yellow: #CFC493;
    --page-bg: var(--yellow);  /* Current background color */
    
    --color-base: var(--yellow);
    --color-text: var(--black);
    
    /* Accent Colors (Pastels) */
    --sage: #C7D2CC;
    --rose: #E4C5C7;
    --ochre: #E3D0AA;
    --powder: #C8D9E8;
    --lavender: #D4D0E0;

    /* Gradients */
    --gradient-calm: linear-gradient(135deg, var(--powder), var(--sage));
    --gradient-warm: linear-gradient(135deg, var(--rose), var(--ochre));

    /* Special Colors */
    --manifesto-black: #1C1C1E;
    --signal-red: #FF453A;
    --electric-purple: #BF5AF2;
    --phosphor-blue: #64D2FF;
    --truth-green: #30D158;
    --insight-gold: #FFD60A;
    --terminal-green: rgba(0,255,65,0.4);

    /* Typography */
    --font-heading: 'IBM Plex Mono', monospace;
    --font-body: 'IBM Plex Mono', monospace;
    --font-nav: 'IBM Plex Mono', monospace;
    
    /* Layout */
    --nav-height: 80px;
    --container-max-width: 700px;
    --container-padding: 120px 40px;
    
    /* Spacing tokens */
    --space-l: 1.875rem;          /* 30px at 16px root */
    
    /* Text colors */
    --color-muted: #666;          /* 4.5+:1 contrast on white */
    
    /* Animation */
    --transition-fast: 200ms ease-out;
    --transition-slow: 3.2s ease-out;
    --transition-theme: 2s ease;
}