:root {
    --color-primary:                #012d1d;
    --color-primary-container:      #1b4332;
    --color-primary-fixed:          #c1ecd4;
    --color-primary-fixed-dim:      #a5d0b9;
    --color-on-primary:             #ffffff;
    --color-on-primary-container:   #86af99;
    --color-on-primary-fixed:       #002114;
    --color-on-primary-fixed-variant: #274e3d;
    --color-inverse-primary:        #a5d0b9;

    --color-secondary:              #9a442d;
    --color-secondary-container:    #fc9174;
    --color-secondary-fixed:        #ffdbd2;
    --color-secondary-fixed-dim:    #ffb4a1;
    --color-on-secondary:           #ffffff;
    --color-on-secondary-container: #742814;
    --color-on-secondary-fixed:     #3c0800;
    --color-on-secondary-fixed-variant: #7c2e19;

    --color-tertiary:               #3f1d00;
    --color-tertiary-container:     #5f2f00;
    --color-tertiary-fixed:         #ffdcc4;
    --color-tertiary-fixed-dim:     #ffb780;
    --color-on-tertiary:            #ffffff;
    --color-on-tertiary-container:  #e39454;
    --color-on-tertiary-fixed:      #2f1400;
    --color-on-tertiary-fixed-variant: #6f3800;

    --color-surface:                #fcf9f4;
    --color-surface-dim:            #dcdad5;
    --color-surface-bright:         #fcf9f4;
    --color-surface-container-lowest:  #ffffff;
    --color-surface-container-low:     #f6f3ee;
    --color-surface-container:         #f0ede8;
    --color-surface-container-high:    #ebe8e3;
    --color-surface-container-highest: #e5e2dd;
    --color-surface-variant:        #e5e2dd;
    --color-surface-tint:           #3f6653;
    --color-on-surface:             #1c1c19;
    --color-on-surface-variant:     #414844;
    --color-inverse-surface:        #31302d;
    --color-inverse-on-surface:     #f3f0eb;

    --color-outline:                #717973;
    --color-outline-variant:        #c1c8c2;

    --color-error:                  #ba1a1a;
    --color-error-container:        #ffdad6;
    --color-on-error:               #ffffff;
    --color-on-error-container:     #93000a;

    --color-background:             #fcf9f4;
    --color-on-background:          #1c1c19;

    --font-serif:                   'Newsreader', serif;
    --font-sans:                    'Manrope', sans-serif;
    --radius-default:               4px;
    --radius-lg:                    8px;
    --radius-full:                  12px;
}

/* Glassmorphism — for floating navigation or over-image elements */
.glass {
    background-color: rgba(252, 249, 244, 0.8);
    backdrop-filter: blur(12px);
}

/* No 1px borders — boundaries via tonal color blocking only */