:root {
    /* Colors - Material 3 Expressive (Warm) */
    --primary-color: #D95F18;
    /* Burnt Orange */
    --primary-light: #F08E56;
    --primary-dark: #A6440C;

    --bg-color: #FDFCF6;
    /* Warm Off-White / Cream */
    --surface-color: #FFFFFF;
    --surface-subtle: #F7F5EE;

    --text-main: #423B35;
    /* Warm Black/Brown */
    --text-muted: #756D65;

    --shadow-color: 25, 20, 15;
    /* RGB for shadow alpha usage */

    /* Semantic Colors */
    --color-recent: #00897B;
    /* Teal */
    --color-relevant: #F9A825;
    /* Mustard */
    --color-old: #D32F2F;
    /* Red */

    /* Typography */
    --font-family: 'Outfit', sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Radius */
    --radius-md: 16px;
    --radius-lg: 28px;
    /* High radius for Material 3 */
    --radius-pill: 999px;

    /* Animation */
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
}