:root {
    --brand-navy: #0C375E;
    --brand-navy-strong: #082A48;
    --brand-cyan: #16CADB;
    --brand-cyan-strong: #11B7C7;
    --brand-slate: #496986;
    --brand-fog: #F4F8FB;
    --brand-cloud: #D7E3EA;
    --brand-cloud-strong: #C6D3DD;
    --brand-placeholder: #95A9B9;
    --brand-placeholder-surface: #D8E3EA;
    --brand-placeholder-surface-strong: #D0DCE5;

    --color-background: var(--brand-fog);
    --color-surface: #FFFFFF;
    --color-surface-muted: #EDF4F7;
    --color-text: var(--brand-navy);
    --color-muted: #5C788F;
    --color-border: var(--brand-cloud);
    --color-border-strong: var(--brand-cloud-strong);
    --color-border-soft: rgba(215, 227, 234, 0.95);
    --color-border-soft-strong: rgba(215, 227, 234, 0.98);
    --color-border-soft-muted: rgba(215, 227, 234, 0.90);

    --color-primary: var(--brand-navy);
    --color-primary-dark: var(--brand-navy-strong);
    --color-accent: var(--brand-cyan);
    --color-accent-strong: var(--brand-cyan-strong);
    --color-accent-soft: rgba(22, 202, 219, 0.10);
    --color-accent-soft-strong: rgba(22, 202, 219, 0.16);
    --color-accent-border: rgba(22, 202, 219, 0.58);
    --color-accent-ring: rgba(22, 202, 219, 0.18);

    --color-on-dark: #FFFFFF;
    --color-contrast: var(--brand-navy-strong);
    --color-placeholder: var(--brand-placeholder);
    --color-placeholder-surface: var(--brand-placeholder-surface);
    --color-placeholder-surface-strong: var(--brand-placeholder-surface-strong);

    --surface-overlay-65: rgba(255, 255, 255, 0.65);
    --surface-overlay-92: rgba(255, 255, 255, 0.92);
    --surface-overlay-94: rgba(255, 255, 255, 0.94);
    --surface-overlay-96: rgba(255, 255, 255, 0.96);
    --surface-overlay-98: rgba(255, 255, 255, 0.98);
    --surface-on-dark-16: rgba(255, 255, 255, 0.16);
    --background-overlay-96: rgba(244, 248, 251, 0.96);

    --ink-transparent: rgba(12, 55, 94, 0);
    --ink-overlay-24: rgba(12, 55, 94, 0.24);
    --ink-overlay-40: rgba(12, 55, 94, 0.40);
    --ink-overlay-74: rgba(12, 55, 94, 0.74);
    --ink-overlay-78: rgba(12, 55, 94, 0.78);
    --ink-overlay-82: rgba(8, 42, 72, 0.82);
    --ink-overlay-92: rgba(8, 42, 72, 0.92);

    --color-success-bg: #EAF7F1;
    --color-success-text: #1D6B4C;
    --color-success-border: #CFE7DA;
    --color-warning-bg: #FFF5DF;
    --color-warning-text: #A56208;
    --color-danger-bg: #FDEDED;
    --color-danger-text: #A53030;

    --shadow-soft: 0 12px 30px rgba(12, 55, 94, 0.08);
    --shadow-strong: 0 20px 45px rgba(12, 55, 94, 0.12);

    --gradient-overlay-strong: linear-gradient(180deg, var(--ink-transparent) 0%, var(--ink-overlay-78) 58%, var(--ink-overlay-92) 100%);
    --gradient-overlay-medium: linear-gradient(180deg, var(--ink-transparent) 0%, var(--ink-overlay-74) 58%, var(--ink-overlay-92) 100%);
    --gradient-brand-fallback: linear-gradient(135deg, rgba(22, 202, 219, 0.20), var(--ink-overlay-82));
    --gradient-avatar: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}