:root {
    --color-dark: #352a24;
    --color-dark-2: #44352e;
    --color-dark-3: #54433a;
    --color-dark-5: rgba(53, 42, 36, 0.05);
    --color-dark-8: rgba(53, 42, 36, 0.08);
    --color-dark-10: rgba(53, 42, 36, 0.10);
    --color-dark-14: rgba(53, 42, 36, 0.14);
    --color-dark-20: rgba(53, 42, 36, 0.20);

    --color-grey: #7d7068;
    --color-grey-light: #96877d;
    --color-grey-faint: #b8a99d;

    --color-accent: #b9853b;
    --color-accent-hover: #9f712f;
    --color-accent-5: rgba(185, 133, 59, 0.05);
    --color-accent-10: rgba(185, 133, 59, 0.10);
    --color-accent-16: rgba(185, 133, 59, 0.16);
    --color-accent-22: rgba(185, 133, 59, 0.22);

    --color-light: #fbf6ef;
    --color-light-2: #f7efe5;
    --color-light-3: #f4eadf;
    --color-white: #fffdfa;

    --color-success: #507b4e;
    --color-warning: #ad7427;
    --color-error: #b54c4c;

    --color-bg: #fffdfa;
    --color-surface: #fffdfa;
    --color-surface-soft: #fbf6ef;
    --color-surface-strong: #f4eadf;
    --color-surface-contrast: #f7efe5;

    --color-text: #352a24;
    --color-text-muted: #7d7068;
    --color-text-faint: #ad9f95;
    --color-text-inverse: #fffdfa;

    --color-primary: #8b5e34;
    --color-primary-hover: #744d2a;
    --color-primary-soft: rgba(139, 94, 52, 0.10);
    --color-primary-soft-2: rgba(139, 94, 52, 0.16);

    --color-border: rgba(53, 42, 36, 0.10);
    --color-border-strong: rgba(53, 42, 36, 0.16);
    --color-divider: rgba(53, 42, 36, 0.08);

    --hero-bg: #352a24;
    --hero-text: #fffdfa;
    --hero-muted: rgba(255,253,250,0.72);
    --hero-faint: rgba(255,253,250,0.34);
    --hero-desc: rgba(255,253,250,0.80);
    --hero-link-hover: #f2d1a0;

    --hero-badge-bg: rgba(255,253,250,0.08);
    --hero-badge-border: rgba(255,253,250,0.12);
    --hero-badge-text: #f4dfbf;

    --hero-ghost-bg: rgba(255,253,250,0.06);
    --hero-ghost-border: rgba(255,253,250,0.16);
    --hero-ghost-hover: rgba(255,253,250,0.12);

    --hero-overlay-strong: rgba(53, 42, 36, 0.97);
    --hero-overlay-mid: rgba(53, 42, 36, 0.92);
    --hero-overlay-soft: rgba(53, 42, 36, 0.76);
    --hero-overlay-fade: rgba(53, 42, 36, 0.26);
    --hero-overlay-bottom: rgba(53, 42, 36, 0.80);
    --hero-overlay-tablet: rgba(53, 42, 36, 0.76);

    --hero-glow-1: rgba(185, 133, 59, 0.10);
    --hero-glow-2: rgba(139, 94, 52, 0.14);

    --hero-mobile-overlay-top: rgba(53, 42, 36, 0.36);
    --hero-mobile-overlay-bottom: rgba(53, 42, 36, 0.84);
}