/* Serene Scan design tokens. The only place colours, type, spacing, radii and motion are defined.
   Brand source: brand/serene-design-system.md (Serene Construction). Fonts are self-hosted. */

@font-face {
  font-family: 'Montserrat';
  src: url('/brand/montserrat-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/brand/source-sans-3-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand scales (theme independent) ---- */
  --teal-50: #E9F7F8;
  --teal-100: #CDEDF0;
  --teal-200: #98DBE1;
  --teal-500: #0699A8;
  --teal-600: #058291;
  --teal-700: #056873;
  --teal-800: #0A4E56;
  --teal-900: #0B3A40;
  --gray-50: #F7F7F8;
  --gray-100: #EFEFF0;
  --gray-200: #E3E3E5;
  --gray-300: #CBCBCE;
  --gray-400: #A6A6AA;
  --gray-500: #77777A;
  --gray-600: #606063;
  --gray-700: #4B4B4E;
  --gray-900: #202023;

  /* ---- type ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 44px;
  --track-eyebrow: 0.14em;
  --track-wordmark: 0.18em;

  /* ---- spacing scale (4 px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 56px;

  /* ---- shape + motion ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-fast: 120ms;
  --t: 160ms;
  --t-slow: 200ms;

  /* ---- layout ---- */
  --appbar-h: 60px;
  --panel-w: 420px;
  --gutter: 16px;

  /* ---- dark theme: deep teal-slate. The default. ---- */
  --canvas: #0F171A;
  --surface: #15232A;
  --quiet: #1F3139;
  --quiet-2: #274049;
  --border: #2B3F48;
  --border-strong: #3B5560;
  --text-head: #E9F0F2;
  --text-body: #BCCBD1;
  --text-muted: #80969F;
  --accent: #0699A8;
  --accent-hover: #12AEBE;
  --accent-press: #058291;
  --accent-bright: #4CC4D0;
  --accent-soft: #123740;
  --accent-ink: #98DBE1;
  --on-accent: #FFFFFF;
  --focus-ring: 0 0 0 3px rgba(152, 219, 225, .55);
  --focus-ring-color: rgba(152, 219, 225, .55);

  --ok: #8AD3A5;
  --ok-bg: #153325;
  --ok-dot: #4CB57A;
  --warn: #EBC477;
  --warn-bg: #3A2F14;
  --warn-dot: #E0A526;
  --bad: #F1A395;
  --bad-bg: #3F1F1B;
  --bad-dot: #E5604F;
  --info: #98DBE1;
  --info-bg: #12373F;
  --info-dot: #4CC4D0;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .22);
  --shadow-raised: 0 4px 12px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --scrim: rgba(5, 10, 12, .65);

  --viewport-bg: #0B1215;
  --grid-line: #98DBE1;
  --geo-wall: #2BB8C7;
  --geo-wall-low: #E8B23A;
  --geo-floor: #1D6A75;
  --geo-door: #4CC48A;
  --geo-window: #6AA2E8;
  --geo-opening: #A99AD6;
  --geo-object: #BCCBD1;
  --geo-missed: #EE5B49;
  --geo-occluded: #8FA3AB;
  --geo-mesh: #8FA9B2;
  --geo-trail: #98DBE1;
  --geo-entry: #4CC4D0;
  --geo-highlight: #F5A03B;
  --label-bg: rgba(21, 35, 42, .92);
  --label-text: #E9F0F2;
  --label-room-bg: #0699A8;
  --label-room-text: #FFFFFF;

  color-scheme: dark;
}

/* ---- light theme: only when the user picks it with the toggle (remembered) ---- */
:root[data-theme='light'] {
  --canvas: #F7F7F8;
  --surface: #FFFFFF;
  --quiet: #F2F5F6;
  --quiet-2: #E8EEF0;
  --border: #E3E3E5;
  --border-strong: #CBCBCE;
  --text-head: #202023;
  --text-body: #4B4B4E;
  --text-muted: #6B6B6F;
  --accent: #058291;
  --accent-hover: #056873;
  --accent-press: #0A4E56;
  --accent-bright: #0699A8;
  --accent-soft: #E9F7F8;
  --accent-ink: #056873;
  --on-accent: #FFFFFF;
  --focus-ring: 0 0 0 3px #98DBE1;
  --focus-ring-color: #98DBE1;

  --ok: #1E6B3E;
  --ok-bg: #E8F4EC;
  --ok-dot: #2E9A5B;
  --warn: #85560A;
  --warn-bg: #FBF3E1;
  --warn-dot: #D49A1C;
  --bad: #A3301F;
  --bad-bg: #FAEAE7;
  --bad-dot: #D64535;
  --info: #056873;
  --info-bg: #E9F7F8;
  --info-dot: #0699A8;

  --shadow-card: 0 1px 2px rgba(11, 58, 64, .06), 0 2px 8px rgba(11, 58, 64, .05);
  --shadow-raised: 0 4px 12px rgba(11, 58, 64, .10), 0 12px 32px rgba(11, 58, 64, .12);
  --scrim: rgba(11, 58, 64, .45);

  /* 3D / plan canvas geometry (read by scene.js) */
  --viewport-bg: #EEF3F4;
  --grid-line: #0B3A40;
  --geo-wall: #0699A8;
  --geo-wall-low: #E0A526;
  --geo-floor: #6CC3CC;
  --geo-door: #2F9E6A;
  --geo-window: #4C86CC;
  --geo-opening: #8C7DB8;
  --geo-object: #4B4B4E;
  --geo-missed: #D64535;
  --geo-occluded: #8A979D;
  --geo-mesh: #5B6E75;
  --geo-trail: #0B3A40;
  --geo-entry: #058291;
  --geo-highlight: #E8890C;
  --label-bg: rgba(255, 255, 255, .92);
  --label-text: #202023;
  --label-room-bg: #056873;
  --label-room-text: #FFFFFF;

  color-scheme: light;
}