/* Building explorer design tokens. Change theme values here; no build required. */
:root {
  color-scheme: dark;

  /* Neutral architecture palette. Warm color is reserved for daylight/evidence. */
  --color-canvas: #000;
  --color-text: #f2f3f5;
  --color-text-secondary: #c1c7d1;
  --color-text-muted: #a8b0be;
  --color-text-inverse: #191c22;
  --color-surface: #191c22;
  --color-surface-raised: #252a33;
  --color-surface-hover: #343b47;
  --color-surface-selected: #edf0f5;
  --color-surface-selected-hover: #fff;
  --color-overlay-control: #20242bee;
  --color-overlay-panel: #191c22fa;
  --color-overlay-soft: #191c22ee;
  --color-overlay-hover: #ffffff0b;
  --color-overlay-pressed: #ffffff14;
  --color-backdrop: #0005;
  --color-border: #ffffff24;
  --color-border-strong: #ffffff3b;
  --color-border-hover: #ffffff66;
  --color-border-active: #a6b0c1;
  --color-focus: #b9d4ff;
  --color-selection: #38d9ff;
  --color-daylight: #ffd38a;
  --color-daylight-border: #bc9864;
  --color-warning: #e6c99c;
  --color-evidence: #dac6a4;
  --color-switch-off: #586171;
  --color-switch-knob: #c7cfdb;
  --color-crosshair: #ffffffaa;

  /* Type uses the system font and respects the browser's default text size. */
  --font-family: "Segoe UI", system-ui, sans-serif;
  --text-2xs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -.02em;
  --tracking-eyebrow: .14em;

  /* Spacing scale; 2 px and 6 px are for compact nested controls. */
  --space-px: 1px;
  --space-half: 2px;
  --space-1: 4px;
  --space-1h: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-control: 12px;
  --radius-selected: 14px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --control-size: 44px;
  --control-size-large: 48px;
  --icon-size: 20px;
  --icon-size-large: 24px;
  --icon-size-small: 16px;
  --icon-stroke: 1.5;
  --switch-width: 36px;
  --switch-height: 22px;
  --switch-knob: 16px;
  --switch-gap: 3px;
  --switch-travel: 14px;
  --disabled-opacity: .45;

  --shadow-control: 0 4px 16px #0003;
  --shadow-dock: 0 8px 32px #0006;
  --shadow-panel: 0 16px 60px #0008;
  --shadow-selected: 0 1px 6px #0003;
  --shadow-text: 0 1px 4px #000, 0 1px 12px #000;
  --shadow-crosshair: 0 0 0 1px #0008;
  --header-scrim: linear-gradient(#000b, #0000);
  --blur-control: 16px;
  --blur-panel: 20px;
  --duration-fast: 140ms;
  --ease-standard: ease-out;
  --layer-sticky: 1;
  --layer-notice: 4;
  --layer-loading: 5;
  --layer-popover: 10;

  /* Shared layout rhythm. JS reads resolved insets for popovers and dialogs. */
  --edge: var(--space-8);
  --bottom-edge: var(--space-10);
  --inset-top: calc(var(--edge) + env(safe-area-inset-top));
  --inset-left: calc(var(--edge) + env(safe-area-inset-left));
  --inset-right: calc(var(--edge) + env(safe-area-inset-right));
  --inset-bottom: calc(var(--bottom-edge) + env(safe-area-inset-bottom));
  --panel-padding: var(--space-5);
  --panel-width: 352px;
  --panel-width-wide: 432px;
  --panel-width-help: 480px;
  --daylight-field-min: 140px;
  --model-tools-width: 224px;
  --mode-label-size: var(--text-base);
  --mode-touch-size: 60px;
}

/* Media thresholds are structural CSS constraints, not theme colors/spacing. */
@media (max-width: 900px) {
  :root { --edge: var(--space-6); --bottom-edge: var(--space-8); }
}
@media (max-width: 760px) {
  :root { --edge: var(--space-5); --bottom-edge: var(--space-7); --panel-padding: var(--space-4); --mode-label-size: var(--text-sm); }
}
@media (max-width: 360px) {
  :root { --mode-label-size: var(--text-xs); }
}
@media (max-height: 500px) {
  :root { --panel-padding: var(--space-4); }
}
@media (max-height: 500px) and (min-width: 760px) {
  :root { --edge: var(--space-5); --bottom-edge: var(--space-7); }
}
@media (min-width: 1800px) and (min-height: 900px) {
  :root { --edge: var(--space-10); --bottom-edge: var(--space-12); --model-tools-width: 256px; --mode-label-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; }
}