:root {
    /* ==========================================
        PRIMARY BRAND
    ========================================== */

    --color-primary: rgb(152 101 83);
    --color-primary-light: rgb(227 198 186);
    --color-primary-dark: rgb(128 83 67);

    /* ==========================================
        BACKGROUNDS
    ========================================== */

    --color-bg-dark: rgb(13 12 13);
    --color-bg-dark-soft: rgb(22 20 22);
    --color-bg-dark-card: rgb(29 27 29);

    --color-bg-light: rgb(248 245 243);
    --color-bg-light-soft: rgb(243 239 236);
    --color-bg-light-card: rgb(255 255 255);

    --color-bg-rose: rgb(185 141 132);
    --color-bg-rose-light: rgb(209 171 160);

    /* ==========================================
        TEXT
    ========================================== */

    --color-text-dark: rgb(44 38 37);
    --color-text-medium: rgb(95 85 82);
    --color-text-light: rgb(255 255 255);

    --color-text-muted: rgb(142 134 131);
    --color-text-accent: rgb(207 163 145);

    /* ==========================================
        BORDERS
    ========================================== */

    --color-border-light: rgb(232 223 218);
    --color-border-medium: rgb(216 200 192);
    --color-border-dark: rgb(52 47 49);

    /* ==========================================
        ICONS
    ========================================== */

    --color-icon-primary: rgb(207 163 145);
    --color-icon-light: rgb(231 210 202);
    --color-icon-dark: rgb(44 38 37);

    /* ==========================================
        FOOTER
    ========================================== */

    --color-footer-bg: rgb(12 11 12);
    --color-footer-icon: rgb(215 180 167);
    --color-footer-icon-hover-bg: rgb(215 180 167);
    --color-footer-icon-hover: rgb(17 17 17);

    /* ==========================================
        SHADOWS
    ========================================== */

    --shadow-soft:
        0 10px 30px rgb(0 0 0 / 0.08);

    --shadow-medium:
        0 20px 40px rgb(0 0 0 / 0.12);

    --shadow-dark:
        0 20px 60px rgb(0 0 0 / 0.25);

    /* ==========================================
        GRADIENTS
    ========================================== */

    --gradient-primary:
        linear-gradient(135deg,
            rgb(215 180 167) 0%,
            rgb(207 163 145) 100%);

    --gradient-cta:
        linear-gradient(90deg,
            rgb(185 141 132) 0%,
            rgb(200 161 150) 100%);

    --gradient-dark:
        linear-gradient(180deg,
            rgb(13 12 13) 0%,
            rgb(22 20 22) 100%);

    /* ==========================================
        SEMANTIC TOKENS
    ========================================== */

    --background: var(--color-bg-light);
    --foreground: var(--color-text-dark);

    --card: var(--color-bg-light-card);
    --card-foreground: var(--color-text-dark);

    --primary: var(--color-primary);
    --primary-foreground: rgb(255 255 255);

    --secondary: var(--color-bg-dark);
    --secondary-foreground: rgb(255 255 255);

    --muted: var(--color-bg-light-soft);
    --muted-foreground: var(--color-text-medium);

    --accent: var(--color-primary);
    --accent-foreground: rgb(255 255 255);

    --border: var(--color-border-light);
}