/* ---- planreviews.ai design tokens (shared by the landing page and the app) ----
   The light theme (:root) is the original look, value for value. The dark "shell" theme
   (html[data-theme=dark]) re-maps the same tokens: dark chrome around the white plan sheet,
   one mint accent. Fonts (Inter body, Space Grotesk display, JetBrains Mono numbers) and the
   gradient-heading treatment are shared by both themes. Flip with the ◐ button in the header
   (persisted in localStorage 'theme'; light is the default). */
:root {
  color-scheme: light;
  --bg: #f2f4f7; --panel: #fff; --panel-2: #fafbfc; --panel-3: #f3f6fa;
  --border: #dde3ea; --border-2: #e4e9ef; --border-strong: #c6cfd9; --border-input: #c6cfd9;
  --text: #1c2430; --text-2: #48536b; --hint: #6b7686; --muted: #9aa7b8; --muted-2: #b5c0cd;
  --accent: #2563eb; --accent-text: #1d4ed8; --accent-soft: #eef4ff; --accent-hover: #e3edfb;
  --accent-active: #cfe0f7; --accent-ring: rgba(37, 99, 235, .45); --on-accent: #fff;
  --accent-disabled: #9db6e8; --accent-border-soft: #2563eb33;
  --ok: #0f7a3d; --ok-text: #0a7a3d; --ok-soft: #effaf3; --ok-border: #a9d8bc; --ok-strong: #086632;
  --warn: #f59e0b; --warn-text: #b45309; --warn-soft: #fff7e8; --warn-ring: rgba(245, 158, 11, .08);
  --danger: #b42318; --danger-text: #b3261e; --danger-soft: #fdf1f0; --danger-border: #dcb1ab; --danger-strong: #9a1e14;
  --header-bg: #1c2430; --header-fg: #fff; --header-sub: #9aa7b8; --header-border: transparent;
  --canvas-bg: #eceff3; --sheet-shadow: none;
  --track: #e4e9ef; --scrim: rgba(28, 36, 48, .45);
  --shadow: 0 1px 2px rgba(16, 34, 61, .08); --shadow-menu: 0 6px 24px rgba(16, 34, 61, .18);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .25);
  --radius: 6px; --radius-sm: 5px; --radius-xs: 4px;
  --font: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --grad-text: linear-gradient(90deg, #2563eb 0%, #0891b2 100%);
  --btn-hover: brightness(0.96);
  --chip-bg: #eef1f5; --chip-fg: #48536b;
  --chip-device-bg: #e7f6ee; --chip-device-fg: #0f7a3d; --chip-device-bd: #bfe6cf;
  --chip-noise-bg: #f3f4f6; --chip-noise-fg: #6b7280; --chip-noise-bd: #d7dbe1;
  --chip-other-bg: #fdf3e3; --chip-other-fg: #92600a; --chip-other-bd: #f0dcb3;
  --chip-unsure-bg: #f5f0fb; --chip-unsure-fg: #6d4fa3; --chip-unsure-bd: #ddd0f0;
  --chip-warn-bg: #fdecec; --chip-warn-fg: #b3261e; --chip-warn-bd: #f2c6c4;
  --chip-ignored-fg: #9aa1ac;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000811; --panel: #06111d; --panel-2: #0b1826; --panel-3: #10202f;
  --border: #142638; --border-2: #10202f; --border-strong: #22394e; --border-input: #22394e;
  --text: #e8eef4; --text-2: #b4c2cf; --hint: #7f90a1; --muted: #55667a; --muted-2: #33475a;
  --accent: #00ce75; --accent-text: #2ee38f; --accent-soft: rgba(0, 206, 117, .10);
  --accent-hover: rgba(0, 206, 117, .16); --accent-active: rgba(0, 206, 117, .26);
  --accent-ring: rgba(0, 206, 117, .45); --on-accent: #00140a;
  --accent-disabled: #14533a; --accent-border-soft: rgba(0, 206, 117, .35);
  --ok: #2fd27a; --ok-text: #2fd27a; --ok-soft: rgba(47, 210, 122, .12); --ok-border: rgba(47, 210, 122, .35); --ok-strong: #22b567;
  --warn: #f5b53f; --warn-text: #f5b53f; --warn-soft: rgba(245, 181, 63, .12); --warn-ring: rgba(245, 181, 63, .10);
  --danger: #ff6b5f; --danger-text: #ff6b5f; --danger-soft: rgba(255, 107, 95, .12); --danger-border: rgba(255, 107, 95, .35); --danger-strong: #e5544a;
  --header-bg: #000811; --header-fg: #fff; --header-sub: #7f90a1; --header-border: #142638;
  --canvas-bg: #03101c; --sheet-shadow: 0 0 0 1px #1a2d40, 0 18px 50px rgba(0, 0, 0, .55);
  --track: #10202f; --scrim: rgba(0, 8, 17, .72);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-menu: 0 10px 30px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .7);
  --grad-text: linear-gradient(90deg, #00ff85 0%, #22d3ee 100%);
  --btn-hover: brightness(1.18);
  --chip-bg: #10202f; --chip-fg: #b4c2cf;
  --chip-device-bg: rgba(47, 210, 122, .12); --chip-device-fg: #2fd27a; --chip-device-bd: rgba(47, 210, 122, .35);
  --chip-noise-bg: #10202f; --chip-noise-fg: #7f90a1; --chip-noise-bd: #22394e;
  --chip-other-bg: rgba(245, 181, 63, .12); --chip-other-fg: #f5b53f; --chip-other-bd: rgba(245, 181, 63, .35);
  --chip-unsure-bg: rgba(167, 139, 250, .14); --chip-unsure-fg: #b9a5ff; --chip-unsure-bd: rgba(167, 139, 250, .4);
  --chip-warn-bg: rgba(255, 107, 95, .12); --chip-warn-fg: #ff6b5f; --chip-warn-bd: rgba(255, 107, 95, .35);
  --chip-ignored-fg: #55667a;
}

/* theme switch (header) */
.theme-btn {
  align-self: center; font-size: 15px; line-height: 1; padding: 4px 9px;
  background: transparent; color: var(--header-sub); border-color: var(--border-strong);
}
.theme-btn:hover { color: var(--header-fg); }

/* display headings: keygen-style gradient text fill (blue→cyan on light, mint→cyan on dark) */
header h1, h2, .modal-card h3, .dropzone > p:first-child > b {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600; letter-spacing: .01em;
}
header h1 { font-size: 20px; }
.dropzone { border-color: var(--border-strong); background: var(--panel-2); }
.dropzone > p:first-child { font-size: 16px; }

/* the wordmark is a link home; it inherits the gradient fill from the heading rule */
header h1 a.wordmark, .wordmark { color: inherit; text-decoration: none; background: inherit; -webkit-background-clip: text; background-clip: text; }