:root {
    color-scheme: light;

    /* CCXPuls logo palette: the only source for product colour values. */
    --brand-navy: #062b4f;
    --brand-ocean: #127f9a;
    --brand-teal: #2db7aa;
    --brand-mint: #43cfae;
    --accent: #0b7186;
    --accent-deep: #062b4f;
    --accent-soft: #dff6f2;

    /* Semantic surfaces and text. */
    --background: #f4f8f8;
    --surface: #ffffff;
    --surface-strong: #fbfdfd;
    --surface-soft: #edf5f4;
    --surface-subtle: #f5faf9;
    --text: #102b3e;
    --ink: var(--text);
    --muted-strong: #526b78;
    --muted: #82949c;
    --line: #dce8e7;
    --border: var(--line);
    --field-bg: var(--surface);
    --field-border: #cadbd9;
    --field-control-height: 40px;
    --field-control-padding-block: .5rem;
    --field-control-padding-inline: .75rem;
    --field-label-gap: .35rem;
    --field-label-size: .75rem;
    --field-value-weight: 400;
    --select-chevron-width: 12px;
    --select-chevron-height: 12px;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctext x='6' y='6' fill='%2382949c' font-family='Arial,sans-serif' font-size='12.6' font-weight='700' text-anchor='middle' dominant-baseline='central'%3E%26%23x2304%3B%3C/text%3E%3C/svg%3E");
    --on-accent: #ffffff;

    /* Semantic state colours. */
    --success: #2ca777;
    --success-soft: #e5f7ef;
    --warning: #d99729;
    --warning-soft: #fff4dc;
    --danger: #e45e69;
    --danger-soft: #ffebed;
    --success-ink: color-mix(in srgb, var(--success) 68%, var(--text));
    --warning-ink: color-mix(in srgb, var(--warning) 68%, var(--text));
    --danger-ink: color-mix(in srgb, var(--danger) 68%, var(--text));
    --success-border: color-mix(in srgb, var(--success) 45%, var(--line));
    --warning-border: color-mix(in srgb, var(--warning) 45%, var(--line));
    --danger-border: color-mix(in srgb, var(--danger) 45%, var(--line));
    --success-tint: color-mix(in srgb, var(--success) 10%, transparent);
    --success-tint-subtle: color-mix(in srgb, var(--success) 8%, transparent);
    --danger-tint: color-mix(in srgb, var(--danger) 10%, transparent);
    --danger-tint-subtle: color-mix(in srgb, var(--danger) 8%, transparent);
    --accent-tint-subtle: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-tint-strong: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 35%, var(--line));
    --brand-ocean-tint: color-mix(in srgb, var(--brand-ocean) 14%, transparent);
    --avatar-highlight: color-mix(in srgb, var(--brand-ocean) 18%, var(--on-accent));
    --neutral-tint: color-mix(in srgb, var(--muted) 10%, transparent);

    /* Shared effects. */
    --shadow: 0 14px 45px rgb(6 43 79 / 7%);
    --shadow-control: 0 2px 7px rgb(6 43 79 / 24%);
    --shadow-card: 0 4px 13px rgb(6 43 79 / 8%);
    --shadow-popover: 0 16px 40px rgb(6 43 79 / 14%);
    --shadow-overlay: 0 18px 50px rgb(6 43 79 / 18%);
    --shadow-floating: 0 24px 70px rgb(6 43 79 / 18%);
    --shadow-toast: 0 20px 65px rgb(6 43 79 / 22%);
    --shadow-navbar: 0 18px 48px rgb(0 30 55 / 16%);
    --shadow-login-logo: 0 18px 48px rgb(0 30 55 / 22%);
    --shadow-modal: 0 3px 6px 2px rgb(0 0 0 / 30%);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    --shadow-bottom-bar: 0 -1px 8px rgb(0 0 0 / 10%);
    --overlay-scrim: rgb(0 0 0 / 40%);
    --surface-glass: rgb(255 255 255 / 94%);
    --surface-glow: rgb(255 255 255 / 18%);
    --surface-glow-subtle: rgb(255 255 255 / 12%);

    /* Feature-level semantic tokens. */
    --progress-track: color-mix(in srgb, var(--accent) 12%, var(--surface));
    --timeline-line: color-mix(in srgb, var(--accent) 24%, var(--line));
    --story-gradient-mid: #075774;
    --story-gradient-end: #062b4f;
    --story-kicker: #d7fff7;
    --story-copy: #def5f3;
    --story-foot: #c0e7e3;
    --info: #4284cf;
    --info-soft: #e5f1fd;
    --reconnect-accent: var(--brand-ocean);
    --selection-text: #062b4f;

    /* Global geometry and typography. */
    --radius-control: 12px;
    --radius-card: 16px;
    --radius-modal: 20px;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-container: 5mm;
    --font-display: Leitura, Georgia, "Times New Roman", serif;
    --font-body: Roboto, Helvetica, Arial, sans-serif;
    --font-support: Futura, "Avenir Next", Montserrat, var(--font-body);
    --brand-lockup-width: 175px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-navy: #d8f6f1;
    --brand-ocean: #64c9d5;
    --brand-teal: #56d8c4;
    --brand-mint: #7de6ca;
    --accent: #56d8c4;
    --accent-deep: #1ea7ac;
    --accent-soft: #153e42;
    --background: #0d202b;
    --surface: #132b36;
    --surface-strong: #102630;
    --surface-soft: #1a3540;
    --surface-subtle: #17303b;
    --text: #eefaf8;
    --ink: var(--text);
    --muted-strong: #b7ccc9;
    --muted: #879f9e;
    --line: #29454c;
    --field-bg: #132b36;
    --field-border: #36575c;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctext x='6' y='6' fill='%23879f9e' font-family='Arial,sans-serif' font-size='12.6' font-weight='700' text-anchor='middle' dominant-baseline='central'%3E%26%23x2304%3B%3C/text%3E%3C/svg%3E");
    --success-soft: #183d31;
    --warning-soft: #45361c;
    --danger-soft: #48262d;
    --shadow: 0 18px 50px rgb(0 0 0 / 24%);
}