:root {
    /* Brand */
    --ds-brand-950: #08275f;
    --ds-brand-900: #0b3278;
    --ds-brand-800: #123f91;
    --ds-brand-700: #145aa7;
    --ds-brand-600: #087fb8;
    --ds-brand-500: #08b3e2;
    --ds-brand-400: #35c5eb;
    --ds-brand-100: #dff7ff;
    --ds-brand-50: #f1fbff;

    /* Semantic colors */
    --ds-success-700: #11633f;
    --ds-success-600: #168457;
    --ds-success-100: #ddf7e9;
    --ds-warning-700: #8a5200;
    --ds-warning-500: #f3ad21;
    --ds-warning-100: #fff1cd;
    --ds-danger-700: #9d2c26;
    --ds-danger-600: #c43d34;
    --ds-danger-100: #ffe5e2;

    /* Neutral surfaces */
    --ds-ink: #17243d;
    --ds-text: #34435d;
    --ds-muted: #69778d;
    --ds-line: #d8e4f0;
    --ds-line-strong: #bed1e3;
    --ds-page: #f3f8fc;
    --ds-surface: #ffffff;
    --ds-surface-soft: #f7fbfe;

    /* Typography */
    --ds-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-font-size-sm: .78rem;
    --ds-font-size-body: .9rem;
    --ds-font-size-lg: 1.05rem;
    --ds-line-height: 1.55;

    /* Layout */
    --ds-space-1: .25rem;
    --ds-space-2: .5rem;
    --ds-space-3: .75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-page-gutter: clamp(1rem, 3vw, 3rem);
    --ds-content-max: 1880px;

    /* Shape and elevation */
    --ds-radius-sm: 9px;
    --ds-radius-md: 14px;
    --ds-radius-lg: 20px;
    --ds-radius-xl: 26px;
    --ds-shadow-sm: 0 4px 14px rgba(8, 39, 95, .07);
    --ds-shadow-md: 0 12px 32px rgba(8, 39, 95, .11);
    --ds-shadow-lg: 0 24px 56px rgba(8, 39, 95, .16);
    --ds-ring: 0 0 0 4px rgba(8, 179, 226, .2);
    --ds-transition: 180ms cubic-bezier(.2, .8, .2, 1);

    /* Backward-compatible aliases used by the existing screens. */
    --anpe-navy: var(--ds-brand-800);
    --anpe-blue: var(--ds-brand-500);
    --anpe-ink: var(--ds-ink);
    --anpe-muted: var(--ds-muted);
    --anpe-bg: var(--ds-page);
    --anpe-line: var(--ds-line);
    --anpe-danger: var(--ds-danger-600);
    --radius: var(--ds-radius-md);
    --shadow-sm: var(--ds-shadow-sm);
    --shadow-md: var(--ds-shadow-md);
    --shadow-lg: var(--ds-shadow-lg);
    --ease: var(--ds-transition);
}