:root {
    /* Brand colors */
    --color-main: #76240c;
    --color-main-trn: #551a08af;
    --color-main-dark: #432212;
    --color-main-dark-2: #1b0e07;
    --color-secondary: #e17f28;
    --color-sub-0: #b8dae7;
    --color-sub-1: #b99b92;
    --color-sub-2: #c4c4c4;

    /* Neutrals */
    --color-bg: #f7f5f9;
    --color-white: #ffffff;
    --color-text: #222222;
    --color-border: #9c9c9c;

    /* Feedback */
    --color-success: #2f855a;
    --color-warning: #b7791f;
    --color-error: #b54a4a;

    /* Layout */
    --container-width: 100%;
    --radius-md: 8px;
    --radius-lg: 16px;
    --btn-radius: 999px;

    /* Spacing (4/8px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 50px;
    --space-10: 100px;
    --space-11: 200px;
    

    --text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25);

    --text-shadow-hard: 
        0 2px 4px rgba(0,0,0,0.6),
        0 4px 10px rgba(0,0,0,0.8);
}

.legal-page {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.legal-container {
    text-align: left;
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 450px) {
    .legal-container{
        width: 80%;
        margin-left: 5%;
        padding-bottom: var(--space-5);
    }
}