/* App-led web design v1. Edit here, then sync; palette remains variable. */
:root {
  --brand-navy: #091324;
  --brand-graphite: #1f242e;
  --brand-cyan: #00adbd;
  --brand-indigo: #575cdb;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-control: .75rem;
  --radius-card: 1rem;
  --radius-hero: 1.375rem;
  --control-height: 3rem;
  --content-max: 77.5rem;
  --reading-max: 68ch;
  --breakpoint-small: 680px;
  --breakpoint-medium: 980px;
  --breakpoint-large: 1280px;
  --shadow: 0 22px 55px rgba(0, 0, 0, .24);
}
:root, .theme-dark {
  color-scheme: dark;
  --background: #091324;
  --surface: #162235;
  --surface-raised: #1f2e45;
  --text: #eaf1fa;
  --text-muted: #aab8cb;
  --border: #71829a;
  --divider: #35455d;
  --action: #33ced9;
  --action-text: #091324;
  --action-hover: #64dfe7;
  --focus: #33ced9;
  --success: #83d6ad;
  --warning: #efc36a;
  --error: #ffadb4;
  --link-secondary: #afb4ff;
}
.theme-light {
  color-scheme: light;
  --background: #f7f9fc;
  --surface: #ffffff;
  --surface-raised: #eaf0f7;
  --text: #14243a;
  --text-muted: #526175;
  --border: #71829a;
  --divider: #c9d3e1;
  --action: #007684;
  --action-text: #ffffff;
  --action-hover: #005d69;
  --focus: #007684;
  --success: #176940;
  --warning: #755009;
  --error: #ab2739;
  --link-secondary: #484cc4;
}
/* Compatibility aliases preserve existing public page and portal contracts. */
:root, .theme-dark, .theme-light {
  --night: var(--background);
  --night-2: var(--background);
  --navy: var(--background);
  --panel: var(--surface);
  --panel-2: var(--surface-raised);
  --paper: var(--background);
  --paper-2: var(--surface);
  --surface-2: var(--surface-raised);
  --white: var(--text);
  --ink: var(--text);
  --muted: var(--text-muted);
  --muted-dark: var(--text-muted);
  --line: var(--divider);
  --line-dark: var(--border);
  --brand-primary: var(--action);
  --brand-primary-hover: var(--action-hover);
  --brand-secondary: var(--link-secondary);
  --brand-accent: var(--success);
  --brand-danger: var(--error);
  --signal: var(--action);
  --signal-dark: var(--action);
  --blue: var(--link-secondary);
  --cobalt: var(--link-secondary);
  --coral: var(--error);
  --amber: var(--warning);
  --teal: var(--success);
  --danger: var(--error);
  --radius: var(--radius-card);
  --max: var(--content-max);
}