:root {
  --neutral-50: #fbfdfc;
  --neutral-100: #f2f8f5;
  --neutral-200: #e2e9e7;
  --neutral-300: #bdcbcd;
  --neutral-400: #98adb1;
  --neutral-500: #7b8f93;
  --neutral-600: #596b70;
  --neutral-700: #3a515b;
  --neutral-800: #21404a;
  --neutral-900: #082c30;
  --neutral-950: #071117;
  --teal-50: #eafaf5;
  --teal-100: #cdf4e9;
  --teal-200: #9be8d6;
  --teal-300: #6cddc7;
  --teal-400: #3bd0ba;
  --teal-500: #22b9a7;
  --teal-600: #07998e;
  --teal-700: #066d66;
  --teal-800: #095f5b;
  --teal-900: #104b4a;
  --teal-950: #082d30;
  --green-50: #eefbf3;
  --green-100: #d8f5e3;
  --green-200: #afeccb;
  --green-300: #75dda8;
  --green-400: #3bbd84;
  --green-500: #1a9d6b;
  --green-600: #0d8b60;
  --green-700: #087a54;
  --green-800: #085f45;
  --green-900: #094a38;
  --green-950: #062c23;
  --orange-50: #fff5f0;
  --orange-100: #ffe7dc;
  --orange-200: #ffcebc;
  --orange-300: #ffb298;
  --orange-400: #f69a7e;
  --orange-500: #ed795f;
  --orange-600: #c75a42;
  --orange-700: #a43e2c;
  --orange-800: #843124;
  --orange-900: #61251e;
  --orange-950: #391913;
  --blue-50: #eef8fc;
  --blue-100: #d6eff9;
  --blue-200: #afe0f2;
  --blue-300: #80cbe6;
  --blue-400: #4fb2d4;
  --blue-500: #2b9bc2;
  --blue-600: #1488b7;
  --blue-700: #106f97;
  --blue-800: #0c587e;
  --blue-900: #0a405d;
  --blue-950: #07273b;
  --red-50: #fff3f2;
  --red-100: #ffe3df;
  --red-200: #ffbdb6;
  --red-300: #ffb0a8;
  --red-400: #ef6c61;
  --red-500: #db5146;
  --red-600: #c83c32;
  --red-700: #b42318;
  --red-800: #8f2119;
  --red-900: #692019;
  --red-950: #3e1512;

  --bg-canvas: #f4f0e8;
  --bg-surface: #fffefa;
  --bg-surface-soft: #e9eee6;
  --bg-elevated: #ffffff;
  --bg-overlay: rgb(4 25 36 / .66);
  --text-primary: #103e43;
  --text-secondary: #496567;
  --text-tertiary: #5e716d;
  --text-inverse: #ffffff;
  --text-on-strong: #ffffff;
  --text-disabled: var(--text-secondary);
  --border-subtle: #d9ded4;
  --border-default: #bdcdc5;
  --border-strong: #6c8580;
  --border-control: var(--border-strong);
  --brand-primary: var(--teal-700);
  --brand-secondary: var(--teal-700);
  --accent: var(--orange-500);
  --accent-text: var(--orange-700);
  --action-primary: var(--brand-primary);
  --action-primary-hover: var(--teal-800);
  --action-primary-pressed: var(--teal-900);
  --action-primary-text: var(--text-inverse);
  --action-secondary: var(--bg-surface);
  --action-secondary-text: var(--brand-primary);
  --action-secondary-hover: var(--surface-hover);
  --action-selected: var(--surface-selected);
  --action-selected-text: var(--brand-secondary);
  --action-destructive: var(--status-error);
  --action-destructive-text: var(--text-inverse);
  --action-accent: var(--accent);
  --action-accent-text: var(--neutral-900);
  --action-disabled: var(--bg-surface-soft);
  --status-success: var(--green-700);
  --status-warning: var(--orange-700);
  --status-error: var(--red-700);
  --status-info: var(--teal-700);
  --surface-hover: #e5eee5;
  --surface-selected: #d6eee3;
  --surface-pressed: #cce5d9;
  --focus-ring-color: var(--blue-600);
  --bg: var(--bg-canvas);
  --card: var(--bg-surface);
  --surface-soft: var(--bg-surface-soft);
  --surface-cool: #e6efea;
  --surface-elevated: var(--bg-elevated);
  --surface-ocean: #dcece3;
  --surface-ocean-elevated: #d2e5dc;
  --surface: var(--card);
  --surface-strong: var(--card);
  --surface-muted: var(--surface-soft);
  --muted-surface: var(--surface-cool);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --text-metadata: var(--text-tertiary);
  --muted-text: var(--text-metadata);
  --text-soft: var(--text-metadata);
  --cream: var(--surface-soft);
  --border: var(--border-subtle);
  --divider: color-mix(in srgb, var(--text) 10%, transparent);
  --green: var(--brand-secondary);
  --teal: var(--brand-primary);
  --orange: var(--accent);
  --purple: var(--brand-primary);
  --shadow: var(--depth-card);
  --shadow-raised: var(--depth-raised);
  --shell-control-bg: color-mix(in srgb, var(--card) 90%, var(--surface-ocean));
  --shell-control-border: color-mix(in srgb, var(--teal) 18%, var(--border));
  --shell-control-highlight: rgb(255 255 255 / 0.72);
  --shell-control-shadow: 0 5px 13px rgb(16 55 62 / 0.09);
  --shell-surface-shadow: 0 18px 48px rgb(9 44 52 / 0.16);
  --radius-control: 12px;
  --radius-surface: 18px;
  --radius-destination: 24px;
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--focus-ring-color) 16%, transparent);
  --go-ink: var(--text);
  --go-soft: var(--surface-soft);
  --go-line: var(--border);
  --go-radius: var(--radius-surface);
  --page: var(--bg);
  --ocean-glass-start: #ffffff;
  --ocean-glass-end: var(--dscvr-blue-tint, #eef6f8);
  --ocean-glass-border: var(--dscvr-blue-tint, #cfe1e4);
  --ocean-glass-text: #10252d;
  --ocean-glass-muted: #3d626a;
  --ocean-glass-accent: var(--dscvr-blue, #1488b7);
  --rich-object-surface: #f0f3eb;
  --rich-object-surface-strong: #e6eee4;
  --rich-object-border: #d1dfd4;
  --font-display: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
  --type-display: clamp(2.35rem, 5vw, 4.6rem);
  --type-page-title: clamp(2.05rem, 4vw, 3.5rem);
  --type-section-title: clamp(1.25rem, 2.1vw, 1.75rem);
  --type-card-title: 1rem;
  --type-body: .9375rem;
  --type-supporting: .8125rem;
  --type-label: .75rem;
  --type-meta: .6875rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --page-gutter: clamp(1rem, 4vw, 3.5rem);
  --page-top: clamp(1.75rem, 4vw, 3.25rem);
  --page-max: 1280px;
  --page-focus-max: 1050px;
  --reading-max: 70ch;
  --control-height: 44px;
  --control-height-large: 48px;
  --radius-chip: 999px;
  --radius-small: 10px;
  --radius-nested: max(0px, calc(var(--radius-surface) - var(--space-1)));
  --radius-card: var(--radius-surface);
  --radius-panel: 22px;
  --radius-overlay: var(--radius-destination);
  --radius-round: 50%;
  --depth-flat: none;
  --depth-card: 0 2px 5px rgb(16 62 67 / .04), 0 12px 28px rgb(16 62 67 / .08);
  --depth-raised: 0 4px 10px rgb(16 62 67 / .05), 0 20px 44px rgb(16 62 67 / .13);
  --depth-overlay: 0 24px 64px rgb(5 34 43 / .28);
  --color-danger: var(--status-error);
  --color-warning: var(--status-warning);
  --color-success: var(--status-success);
  --surface-danger: color-mix(in srgb, var(--color-danger) 8%, var(--card));
  --surface-warning: color-mix(in srgb, var(--orange) 10%, var(--card));
  --surface-success: color-mix(in srgb, var(--green) 10%, var(--card));
  --surface-info: color-mix(in srgb, var(--status-info) 10%, var(--card));
  --chrome-bg: #103e43;
  --chrome-fg: #fffefa;
  --chrome-muted: #c6ded7;
  --chrome-line: #3e6c6b;
  --chrome-control: var(--dscvr-blue-deep, #1a5055);
  --chrome-active: #70ebcf;
  --chrome-selected: var(--dscvr-blue-deep, #22635f);
  --chrome-accent: #22c7b8;
  --chrome-accent-ink: #082c30;
  --feature-surface: linear-gradient(120deg, #dcece1 0%, #ececdd 62%, #f4e8d9 100%);
  --feature-line: #cdded0;
  --surface-highlight: rgb(255 255 255 / .75);
}

[data-theme="dark"] {
  --bg-canvas: #0a1c20;
  --bg-surface: #153337;
  --bg-surface-soft: #19383c;
  --bg-elevated: #1d4144;
  --bg-overlay-surface: #275055;
  --bg-overlay: rgb(6 12 16 / .72);
  --text-primary: #f0f5ed;
  --text-secondary: #c0d5ce;
  --text-tertiary: #b0c9c5;
  --text-inverse: #082c30;
  --border-subtle: rgb(202 223 227 / .12);
  --border-default: rgb(202 223 227 / .22);
  --border-strong: #8aacaa;
  --brand-primary: color-mix(in srgb, var(--teal-300) 86%, var(--neutral-300));
  --brand-secondary: color-mix(in srgb, var(--teal-300) 86%, var(--neutral-300));
  --accent: color-mix(in srgb, var(--orange-400) 84%, var(--neutral-300));
  --accent-text: color-mix(in srgb, var(--orange-300) 88%, var(--neutral-300));
  --action-primary: var(--brand-primary);
  --action-primary-hover: color-mix(in srgb, var(--brand-primary) 88%, var(--text-primary));
  --action-primary-pressed: color-mix(in srgb, var(--brand-primary) 76%, var(--text-primary));
  --action-primary-text: var(--text-inverse);
  --status-success: var(--brand-secondary);
  --status-warning: var(--accent-text);
  --status-error: color-mix(in srgb, var(--red-300) 88%, var(--neutral-300));
  --status-info: color-mix(in srgb, var(--blue-300) 86%, var(--neutral-300));
  --surface-hover: #21474b;
  --surface-selected: color-mix(in srgb, var(--brand-secondary) 12%, var(--bg-surface));
  --surface-pressed: #275055;
  --focus-ring-color: var(--brand-primary);
  --surface-cool: var(--bg-elevated);
  --surface-ocean: var(--bg-elevated);
  --surface-ocean-elevated: var(--bg-overlay-surface);
  --rich-object-surface: var(--bg-surface-soft);
  --rich-object-surface-strong: var(--bg-elevated);
  --rich-object-border: var(--border-subtle);
  --shadow: var(--depth-card);
  --shadow-raised: var(--depth-raised);
  --shell-control-bg: var(--bg-elevated);
  --shell-control-border: color-mix(in srgb, var(--teal) 25%, var(--border));
  --shell-control-highlight: rgb(255 255 255 / .04);
  --shell-control-shadow: 0 4px 12px rgb(0 0 0 / .10);
  --shell-surface-shadow: 0 16px 40px rgb(0 0 0 / .20);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--focus-ring-color) 18%, transparent);
  --depth-card: 0 2px 6px rgb(0 0 0 / .12), 0 12px 26px rgb(0 0 0 / .22);
  --depth-raised: 0 6px 14px rgb(0 0 0 / .16), 0 20px 40px rgb(0 0 0 / .28);
  --depth-overlay: 0 24px 64px rgb(0 0 0 / .42);
  --chrome-bg: #0c272c;
  --chrome-line: #2d5357;
  --feature-surface: linear-gradient(120deg, #1b4242 0%, #203e39 65%, #3a4035 100%);
  --feature-line: #355b54;
  --surface-highlight: rgb(221 251 231 / .06);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg-canvas: #0a1c20;
    --bg-surface: #153337;
    --bg-surface-soft: #19383c;
    --bg-elevated: #1d4144;
    --bg-overlay-surface: #275055;
    --bg-overlay: rgb(6 12 16 / .72);
    --text-primary: #f0f5ed;
    --text-secondary: #c0d5ce;
    --text-tertiary: #b0c9c5;
    --text-inverse: #082c30;
    --border-subtle: rgb(202 223 227 / .12);
    --border-default: rgb(202 223 227 / .22);
    --border-strong: #8aacaa;
    --brand-primary: color-mix(in srgb, var(--teal-300) 86%, var(--neutral-300));
    --brand-secondary: color-mix(in srgb, var(--teal-300) 86%, var(--neutral-300));
    --accent: color-mix(in srgb, var(--orange-400) 84%, var(--neutral-300));
    --accent-text: color-mix(in srgb, var(--orange-300) 88%, var(--neutral-300));
    --action-primary: var(--brand-primary);
    --action-primary-hover: color-mix(in srgb, var(--brand-primary) 88%, var(--text-primary));
    --action-primary-pressed: color-mix(in srgb, var(--brand-primary) 76%, var(--text-primary));
    --action-primary-text: var(--text-inverse);
    --status-success: var(--brand-secondary);
    --status-warning: var(--accent-text);
    --status-error: color-mix(in srgb, var(--red-300) 88%, var(--neutral-300));
    --status-info: color-mix(in srgb, var(--blue-300) 86%, var(--neutral-300));
    --surface-hover: #21474b;
    --surface-selected: color-mix(in srgb, var(--brand-secondary) 12%, var(--bg-surface));
    --surface-pressed: #275055;
    --focus-ring-color: var(--brand-primary);
    --surface-cool: var(--bg-elevated);
    --surface-ocean: var(--bg-elevated);
    --surface-ocean-elevated: var(--bg-overlay-surface);
    --rich-object-surface: var(--bg-surface-soft);
    --rich-object-surface-strong: var(--bg-elevated);
    --rich-object-border: var(--border-subtle);
    --shadow: var(--depth-card);
    --shadow-raised: var(--depth-raised);
    --shell-control-bg: var(--bg-elevated);
    --shell-control-border: color-mix(in srgb, var(--teal) 25%, var(--border));
    --shell-control-highlight: rgb(255 255 255 / .04);
    --shell-control-shadow: 0 4px 12px rgb(0 0 0 / .10);
    --shell-surface-shadow: 0 16px 40px rgb(0 0 0 / .20);
    --focus-ring: 0 0 0 4px color-mix(in srgb, var(--focus-ring-color) 18%, transparent);
    --depth-card: 0 2px 6px rgb(0 0 0 / .12), 0 12px 26px rgb(0 0 0 / .22);
    --depth-raised: 0 6px 14px rgb(0 0 0 / .16), 0 20px 40px rgb(0 0 0 / .28);
    --depth-overlay: 0 24px 64px rgb(0 0 0 / .42);
    --chrome-bg: #0c272c;
    --chrome-line: #2d5357;
    --feature-surface: linear-gradient(120deg, #1b4242 0%, #203e39 65%, #3a4035 100%);
    --feature-line: #355b54;
    --surface-highlight: rgb(221 251 231 / .06);
  }
}
@media (max-width: 700px) {
  :root { --mobile-gutter: 14px; }
}