/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
    /* Colors */
    --color-bg: #FAFAF7;
    --color-bg-warm: #F5F4F0;
    --color-bg-card: #FFFFFF;
    --color-text: #1A1A18;
    --color-text-secondary: #5C5C56;
    --color-text-tertiary: #8A8A82;
    --color-accent: #2D6A4F;
    --color-accent-light: #D8F3DC;
    --color-accent-deep: #1B4332;
    --color-red: #D44045;
    --color-red-light: #FDE8EA;
    --color-warm: #E07A3A;
    --color-warm-light: #FEF0E6;
    --color-warm-deep: #C45E20;
    --color-border: #E5E4DF;
    --color-border-strong: #D1D0CB;
    --color-on-dark: #FFFFFF;
    --color-on-dark-muted: rgba(255, 255, 255, 0.5);
    --color-on-dark-soft: rgba(255, 255, 255, 0.75);
    --color-on-dark-border: rgba(255, 255, 255, 0.3);

    /* Bar chart scale — green family, progressively lighter */
    --color-bar-1: #1B4332;
    --color-bar-2: #2D6A4F;
    --color-bar-3: #40916C;
    --color-bar-4: #52B788;
    --color-bar-5: #74C69D;
    --color-bar-6: #95D5B2;

    /* Typography */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'Outfit', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Layout */
    --max-w: 1320px;

    /* Spacing */
    --nav-height: 72px;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Spring Curves (taste-skill) */
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-snap: cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadows */
    --shadow-subtle: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-lifted: 0 12px 40px rgba(0,0,0,0.06);
    --shadow-focus-accent: 0 0 0 3px rgba(45, 106, 79, 0.1);
}