@import './fonts.css';

/* Semantic surfaces are shared by the dashboard, capture and assessment screens. */
:root {
  color-scheme: light;
  --ui-canvas: #f5f7fa;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f7f9fc;
  --ui-surface-raised: #edf1f6;
  --ui-hover: #e7edf4;
  --ui-border: #dce2e9;
  --ui-border-strong: #a8b5c5;
  --ui-text: #202a35;
  --ui-secondary: #4d5d6e;
  --ui-muted: #59697c;
  --ui-faint: #5b6c80;
  --ui-action: #253440;
  --ui-action-hover: #3a5063;
  --ui-on-action: #ffffff;
  --ui-accent: #3568b0;
  --ui-accent-hover: #285796;
  --ui-accent-soft: #eaf1fb;
  --ui-positive: #397c6c;
  --ui-positive-soft: #edf5f1;
  --ui-warning: #906120;
  --ui-warning-soft: #fbf3e7;
  --ui-negative: #ad4945;
  --ui-negative-soft: #fbeceb;
  --ui-header: #fffffff2;
  --ui-overlay: #16202e88;
  --ui-shadow: 0 8px 28px #1c304209;
  --ui-photo: #edf0f4;
  --ui-avatar: #3e6476;
  --ui-on-avatar: #ffffff;
  --ui-scheme: light;
  --score-empty: #5b6c80;
  --score-low: #a44945;
  --score-mid: #886031;
  --score-good: #476f57;
  --score-high: #2c7164;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: #121519;
  --ui-surface: #1b2026;
  --ui-surface-subtle: #20262e;
  --ui-surface-raised: #28313b;
  --ui-hover: #303c49;
  --ui-border: #343e4b;
  --ui-border-strong: #63758a;
  --ui-text: #edf1f5;
  --ui-secondary: #c4cdd7;
  --ui-muted: #a8b5c5;
  --ui-faint: #94a4b8;
  --ui-action: #dce7f2;
  --ui-action-hover: #ffffff;
  --ui-on-action: #172330;
  --ui-accent: #a4c4ef;
  --ui-accent-hover: #c3d9f5;
  --ui-accent-soft: #26394f;
  --ui-positive: #9dc9b6;
  --ui-positive-soft: #243b35;
  --ui-warning: #e0ba83;
  --ui-warning-soft: #3c3227;
  --ui-negative: #f0a3a0;
  --ui-negative-soft: #432c31;
  --ui-header: #1b2026f2;
  --ui-overlay: #000000b3;
  --ui-shadow: 0 8px 28px #00000020;
  --ui-photo: #171d24;
  --ui-scheme: dark;
  --score-empty: #a4b2c2;
  --score-low: #f0a3a0;
  --score-mid: #e2bb83;
  --score-good: #bbd2b1;
  --score-high: #99cdbd;
}
html { background: var(--ui-canvas); scrollbar-color: var(--ui-border-strong) var(--ui-canvas); }
::selection { background: var(--ui-accent-soft); color: var(--ui-text); }
.theme-control {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: 36px; padding: 0 8px 0 10px; border: 1px solid var(--ui-border);
  border-radius: 10px; background: var(--ui-surface); color: var(--ui-secondary);
}
.theme-control select {
  min-height: 34px; width: 82px; padding: 0 3px; border: 0; border-radius: 6px;
  background-color: var(--ui-surface); color: var(--ui-text);
  font: 500 12px/1.4 GeistSans, 'Segoe UI', sans-serif; cursor: pointer;
}
.theme-control:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.theme-control select:focus-visible { outline: none; }
.theme-control option { color: var(--ui-text); background: var(--ui-surface); }
.page-theme-control { position: absolute; top: 18px; right: 22px; z-index: 5; }
:root[data-theme="dark"] .looksmath-logo { filter: invert(1); }
:root[data-theme="dark"] :is(.an-bg, .scan-bg) {
  background: radial-gradient(ellipse at 75% 0, #223249 0, transparent 55%), var(--ui-canvas);
}
:root[data-theme="dark"] .scan-bg-glow { opacity: .12; }
:root[data-theme="dark"] :is(.an-overlay, .scan-overlay) { background: var(--ui-overlay); }
:root[data-theme="dark"] .dash-dialog::backdrop { background: var(--ui-overlay); }
:root[data-theme="dark"] .dash-pillar > svg { opacity: .42; }
:root[data-theme="dark"] :is(.an-choice, .scan-choice)[aria-pressed="true"] {
  border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-text);
}
:root[data-theme="dark"] :is(.an-mode, .scan-mode):hover { border-color: var(--ui-accent); }
button, a, select, summary { touch-action: manipulation; }
@media (max-width: 540px) { .page-theme-control { right: 16px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}