:root {
    /* Surfaces & elevation */
    --sys-surface: #0f1115; /* app/page background */
    --sys-surface-1: #1b1f28; /* card top */
    --sys-surface-2: #161a22; /* card bottom */
    --sys-elevation-1: 0 1px 4px rgba(0,0,0,.5);
    /* Text */
    --sys-on-surface: #c9d3dd; /* body text */
    --sys-on-surface-strong: #e4edf6; /* headings/highlights */
    /* Brand roles */
    --sys-color-primary: #3a5a7d;
    --sys-color-secondary: #3aa3b8;
    --sys-color-success: #27ae60;
    --sys-color-warning: #f1c40f;
    --sys-color-danger: #e74c3c;
    /* Borders / outlines */
    --sys-outline: #3a5a7d;
    /* Inputs */
    --sys-input-bg: #121824;
    --sys-input-text: var(--sys-on-surface);
    --sys-input-placeholder: #9fb0bf;
    --sys-input-border: #3a5a7d;
    --sys-input-focus-ring: color-mix(in oklab, var(--sys-color-primary), white 25%);
    /* Tags / chips */
    --sys-chip-bg: #415664;
    --sys-chip-text: #d2dede;
    --sys-chip-bg-hover: #596f7e;
    --sys-chip-radius: .8rem;
    --sys-chip-padding: .5rem 1rem;
    --sys-chip-gap: .5rem;
    /* Overlays / imagery */
    --sys-image-overlay: rgba(0,0,0,.9);
}