/* Palette verified against eonetwork.org CSS + SVG on 2026-10-30.
   Dark theme tones are readable UI derivatives, not official brand swatches.
   EO UI foundations. Shared by the workspace, public chat and event calendar. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --type-caption: 12px;
  --type-label: 14px;
  --type-body: 16px;
  --type-reading: 16px;
  --type-section: 18px;
  --type-title: 32px;
  --type-display: clamp(36px, 4.45vw, 64px);
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 500;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 16px;
  --radius-panel: 24px;
  --radius-dialog: 24px;
  --control-height: 44px;
  --motion-fast: 160ms;
  --shell-sidebar: 232px;
  --content-gutter: clamp(16px, 2vw, 32px);
  --section-gap: 24px;
  --panel-padding: 24px;
}

:root, html[data-theme="light"] {
  color-scheme: light;
  --page-bg: #f6f6f6;
  --sidebar-bg: #ffffff;
  --topbar-bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f6f6f6;
  --surface-raised: #ffffff;
  --surface-hover: #edeff4;
  --border-subtle: #e0e3eb;
  --border-strong: #b8bfce;
  --text-primary: #0c0c31;
  --text-secondary: #3c3e50;
  --text-muted: #5e617d;
  --text-tertiary: #5e617d;
  --text-inverse: #ffffff;
  --accent-blue: #3d46f2;
  --accent-hover: #1d007f;
  --accent-soft: #eeeefc;
  --on-accent: #ffffff;
  --accent-cyan: #1ea691;
  --accent-violet: #1d007f;
  --accent-pink: #ff346e;
  --accent-orange: #fa653c;
  --status-success: #216854;
  --status-warning: #92620c;
  --status-danger: #a32246;
  --status-info: var(--accent-blue);
  --chart-1: #3d46f2;
  --chart-2: #1ea691;
  --chart-3: #fa653c;
  --chart-4: #ff346e;
  --chart-5: #1d007f;
  --chart-6: #efb82e;
  --chart-7: #3e7394;
  --chart-8: #657f55;
  --chart-axis: #5e617d;
  --chart-grid: #e9ebf1;
  --chart-tooltip: #ffffff;
  --shadow-raised: 0 12px 40px #0c0c3114, 0 2px 6px #0c0c3108;
  --shadow-card: 0 4px 16px #0c0c3106;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #11151e;
  --sidebar-bg: #171c27;
  --topbar-bg: #171c27;
  --surface-1: #1b2130;
  --surface-2: #222938;
  --surface-raised: #272f40;
  --surface-hover: #30394c;
  --border-subtle: #333d50;
  --border-strong: #56627a;
  --text-primary: #edf0f6;
  --text-secondary: #b6bed0;
  --text-muted: #9ba6bd;
  --text-tertiary: #9ba6bd;
  --text-inverse: #171c27;
  --accent-blue: #a4afff;
  --accent-hover: #bdc5ff;
  --accent-soft: #2a3250;
  --on-accent: #171d3c;
  --accent-cyan: #7ec6b9;
  --accent-violet: #b7a4d7;
  --accent-pink: #d59caf;
  --accent-orange: #d7af7c;
  --status-success: #80c9a4;
  --status-warning: #e0bf7c;
  --status-danger: #f0a0ac;
  --status-info: var(--accent-blue);
  --chart-1: #a4afff;
  --chart-2: #7ec6b9;
  --chart-3: #d7af7c;
  --chart-4: #d59caf;
  --chart-5: #b7a4d7;
  --chart-6: #c5bc7b;
  --chart-7: #8bbbd7;
  --chart-8: #a5c58e;
  --chart-axis: #9ba6bd;
  --chart-grid: #333d50;
  --chart-tooltip: #272f40;
  --shadow-raised: 0 12px 40px #00000033;
  --shadow-card: none;
}

/* Compatibility aliases are references, never independent palettes. */
:root, html[data-theme] {
  --focus-ring: var(--text-secondary);
  --page-grid: transparent;
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --panel: var(--surface-1);
  --page: var(--page-bg);
  --blue: var(--accent-blue);
  --navy: var(--sidebar-bg);
  --pink: var(--accent-pink);
  --teal: var(--accent-cyan);
  --yellow: var(--status-warning);
  --orange: var(--accent-orange);
  --green: var(--status-success);
  --shadow: var(--shadow-card);
  --action-gradient: var(--accent-blue);
  --action-gradient-hover: var(--accent-hover);
  --gauge-gradient: var(--accent-blue);
  --guest-page: var(--page-bg);
  --guest-surface: var(--surface-1);
  --guest-surface-strong: var(--surface-1);
  --guest-ink: var(--text-primary);
  --guest-muted: var(--text-secondary);
  --guest-line: var(--border-subtle);
  --guest-accent: var(--accent-blue);
  --guest-accent-2: var(--accent-blue);
  --guest-shadow: var(--shadow-raised);
  --bg: var(--page-bg);
  --surface: var(--surface-1);
  --accent: var(--accent-blue);
  --soft: var(--accent-soft);
  --scrollbar-thumb-start: var(--border-strong);
  --scrollbar-thumb-end: var(--border-strong);
  --scrollbar-thumb-hover-start: var(--text-muted);
  --scrollbar-thumb-hover-end: var(--text-muted);
}

/* Select arrow geometry: 16px inset, 16px icon, 44px text reserve. */
:root{--select-arrow-inset:16px;--select-arrow-size:16px;--select-text-reserve:44px;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E617D' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
html[data-theme="dark"]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B6BED0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}