:root {
    /* Brand colors */
    --primary: #111;
    --secondary: #937238;

    /* Neutral palette */
    --white: #FFF;
    --black: #000;
    --charcoal: #111;
    --grey: #D2D2D3;
    --grey-border: #8A8A8A66;

    /* Accent palette */
    --bronze: #937328;
    --bronze-30: #9373284d;
    --gold: #D0A32F;

    /* Typography */
    --font-family: "Inter", serif;
    --font-family-serif: "Cinzel", serif;
    --font-family-script: "Meow Script", cursive;

    /* Layout */
    --max-width: 1440px;
    --header-height: 140px;

    /* Motion */
    --transition-duration: 0.2s;

    /* Elevation (shadow tokens) */
    --shadow-color: 210deg 2% 42%;
    --shadow-elevation-low:
        0px 0.6px 0.7px hsl(var(--shadow-color) / 0.24),
        0px 1px 1.1px -1.2px hsl(var(--shadow-color) / 0.24),
        0px 2.2px 2.5px -2.5px hsl(var(--shadow-color) / 0.24);
    --shadow-elevation-medium:
        0px 0.6px 0.7px hsl(var(--shadow-color) / 0.25),
        0px 1.9px 2.1px -0.8px hsl(var(--shadow-color) / 0.25),
        -0.1px 4.5px 5.1px -1.7px hsl(var(--shadow-color) / 0.25),
        -0.1px 10.8px 12.2px -2.5px hsl(var(--shadow-color) / 0.25);
    --shadow-elevation-high:
        0px 0.6px 0.7px hsl(var(--shadow-color) / 0.23),
        0px 2.8px 3.1px -0.4px hsl(var(--shadow-color) / 0.23),
        -0.1px 5px 5.6px -0.7px hsl(var(--shadow-color) / 0.23),
        -0.1px 8.1px 9.1px -1.1px hsl(var(--shadow-color) / 0.23),
        -0.1px 12.8px 14.4px -1.4px hsl(var(--shadow-color) / 0.23),
        -0.2px 19.9px 22.4px -1.8px hsl(var(--shadow-color) / 0.23),
        -0.3px 30.2px 34px -2.1px hsl(var(--shadow-color) / 0.23),
        -0.5px 44.4px 50px -2.5px hsl(var(--shadow-color) / 0.23);
}