:root {
    /* Colors — Stylish, Modern, Warm Earthy aesthetic */
    --clr-primary: #5c6843;       /* Earthy olive */
    --clr-primary-container: #ebeedd; /* Very pale chic sage */
    --clr-on-primary: #ffffff;
    --clr-on-primary-container: #2b331d;
    
    --clr-secondary: #746c5f;
    --clr-secondary-container: #f1ebd9;
    --clr-on-secondary: #ffffff;
    --clr-on-secondary-container: #3f3930;

    --clr-tertiary: #84684a;
    --clr-tertiary-container: #ead4bf;
    --clr-on-tertiary: #ffffff;
    --clr-on-tertiary-container: #422d17;
    
    --clr-bg-surface: #fdfbf7;
    --clr-surface-container-lowest: #ffffff;
    --clr-surface-container-low: #f9f7f0;
    --clr-surface-container: #f2efe6;
    
    --clr-text-main: #363430;
    --clr-text-muted: #6e6b65;
    --clr-text-light: #ffffff;
    
    --clr-outline: #8e8b84;
    --clr-outline-variant: #d4d1cb;
    --clr-bg-dark: #3b3935;        /* Warm sophisticated charcoal */

    /* Typography — Noto Serif JP & Manrope */
    --font-serif: 'Noto Serif JP', serif;
    --font-sans: 'Manrope', 'Noto Sans JP', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 9999px;
}