/* HyperLu WarRoom — design foundation
 * Warm charcoal + HyperLu orange. Two fonts. Real scales.
 * Chart series colors live in JS and are intentionally untouched.
 */

:root {
  color-scheme: dark;

  /* Global UI density — ~125% feel at 100% browser zoom (token scale; not CSS zoom) */
  --ui-scale: 1.25;

  /* ── Surfaces ─────────────────────────────────────────── */
  --c-bg: #12100e;
  --c-surface: #1a1715;
  --c-surface-2: #221e1b;
  --c-surface-3: #2b2622;
  --c-elevated: #322c28;

  /* ── Borders ──────────────────────────────────────────── */
  --c-border: #2a2521;
  --c-border-strong: #35302b;
  --c-border-soft: rgba(255, 255, 255, 0.05);

  /* ── Text ─────────────────────────────────────────────── */
  --c-text: #f2ede8;
  --c-text-2: #a89f98;
  --c-text-3: #766d66;
  --c-text-inv: #12100e;

  /* ── Accent (HyperLu orange) — soft fill language, quiet ring ─ */
  --c-accent: #f7931a;
  --c-accent-hover: #ffa63d;
  --c-accent-soft: rgba(247, 147, 26, 0.14);
  --c-accent-ring: rgba(247, 147, 26, 0.22);

  /* ── Status ───────────────────────────────────────────── */
  --c-pos: #3dd68c;
  --c-pos-soft: rgba(61, 214, 140, 0.12);
  --c-pos-border: rgba(61, 214, 140, 0.35);
  --c-neg: #f0605d;
  --c-neg-soft: rgba(240, 96, 93, 0.12);
  --c-neg-border: rgba(240, 96, 93, 0.35);
  --c-warn: #eab308;
  --c-warn-soft: rgba(234, 179, 8, 0.12);
  --c-warn-border: rgba(234, 179, 8, 0.35);
  --c-info: #3d9cf5;
  --c-info-soft: rgba(61, 156, 245, 0.12);
  --c-info-border: rgba(61, 156, 245, 0.35);

  /* ── Lane Today (day stack / Room capacity chart) — not accent orange ─ */
  --lane-today: #3b82f6;
  --lane-today-soft: rgba(59, 130, 246, 0.22);
  --lane-today-text: #ffffff;
  --lane-today-border: rgba(59, 130, 246, 0.55);

  /* ── Horizon chip (toolbar) ─ */
  --lane-horizon: var(--c-warn);
  --lane-horizon-text: #ffffff;
  --lane-horizon-border: var(--c-warn-border);

  /* ── Selected properties count chip ─ */
  --lane-selected: var(--c-neg);
  --lane-selected-text: #ffffff;
  --lane-selected-border: var(--c-neg-border);

  /* Shared black letter outline for blue / yellow / red lane chips */
  --lane-mark-text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
    -1px  0   0 #000,
     1px  0   0 #000,
    -1px  1px 0 #000,
     0    1px 0 #000,
     1px  1px 0 #000,
    -2px -2px 0 #000,
     0   -2px 0 #000,
     2px -2px 0 #000,
    -2px  0   0 #000,
     2px  0   0 #000,
    -2px  2px 0 #000,
     0    2px 0 #000,
     2px  2px 0 #000;

  /* ── Space scale ──────────────────────────────────────── */
  --s-1: calc(4px * var(--ui-scale));
  --s-2: calc(8px * var(--ui-scale));
  --s-3: calc(12px * var(--ui-scale));
  --s-4: calc(16px * var(--ui-scale));
  --s-5: calc(20px * var(--ui-scale));
  --s-6: calc(24px * var(--ui-scale));
  --s-7: calc(32px * var(--ui-scale));
  --s-8: calc(40px * var(--ui-scale));

  /* ── Radius ───────────────────────────────────────────── */
  --r-sm: calc(8px * var(--ui-scale));
  --r-md: calc(12px * var(--ui-scale));
  --r-lg: calc(16px * var(--ui-scale));
  --r-xl: calc(20px * var(--ui-scale));
  --r-pill: 9999px;

  /* ── Shadows (lift only — no baked-in hairline outline) ─ */
  --sh-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-2: 0 8px 24px rgba(0, 0, 0, 0.42);
  --sh-3: 0 18px 48px rgba(0, 0, 0, 0.55);

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-10: calc(10px * var(--ui-scale));
  --t-11: calc(11px * var(--ui-scale));
  --t-12: calc(12px * var(--ui-scale));
  --t-13: calc(13px * var(--ui-scale));
  --t-14: calc(14px * var(--ui-scale));
  --t-16: calc(16px * var(--ui-scale));
  --t-20: calc(20px * var(--ui-scale));
  --t-26: calc(26px * var(--ui-scale));
  --t-32: calc(32px * var(--ui-scale));

  --t-label-size: var(--t-11);
  --t-label-weight: 600;
  --t-label-tracking: 0.08em;

  /* ── Layout chrome ────────────────────────────────────── */
  --app-header-h: calc(52px * var(--ui-scale));
  --room-filter-panel-width: calc(360px * 0.88 * 0.75 * 1.15 * var(--ui-scale));
  --room-filter-panel-collapsed-width: calc(22px * var(--ui-scale));
  --room-filter-panel-inset-x: calc(10px * 0.88 * 0.75 * var(--ui-scale));
  --control-h: calc(36px * var(--ui-scale));
  --chart-portfolio-h: calc(220px * var(--ui-scale));

  /* ── Chart chrome (values match prior look; series colors stay in JS) */
  --chart-tick: var(--c-text-2);
  --chart-title: var(--c-text);
  --chart-grid: rgba(48, 42, 38, 0.55);

  /* ── Legacy aliases (legacy.css + existing JS var() refs) ─ */
  --x-bg-primary: var(--c-bg);
  --x-bg-secondary: var(--c-surface);
  --x-bg-elevated: var(--c-surface-2);
  --x-text-primary: var(--c-text);
  --x-text-secondary: var(--c-text-2);
  --x-text-muted: var(--c-text-3);
  --x-border: var(--c-border);
  --x-border-light: var(--c-border-strong);
  --x-accent: var(--c-accent);
  --x-accent-hover: var(--c-accent-hover);
  --x-success: var(--c-pos);
  --x-error: var(--c-neg);
  --x-warning: var(--c-warn);

  --ui-font: var(--font-sans);
  --ui-font-size: var(--t-14);
  --ui-font-size-sm: var(--t-12);
  --ui-radius: var(--r-xl);
  --ui-radius-sm: var(--r-md);
  --ui-radius-pill: var(--r-pill);
  --ui-gap: var(--s-3);
  --ui-border-color: var(--c-border);
  --ui-border: 1px solid var(--c-border);
  --ui-page-bg: var(--c-bg);
  --ui-bg: var(--c-surface);
  --ui-bg-muted: var(--c-surface);
  --ui-bg-subtle: var(--c-surface-2);
  --ui-bg-elevated: var(--c-surface-2);
  --ui-surface: var(--c-surface);
  --ui-text: var(--c-text);
  --ui-text-muted: var(--c-text-2);
  --ui-text-dim: var(--c-text-3);
  --ui-primary: var(--c-accent);
  --ui-primary-hover: var(--c-accent-hover);
  --ui-primary-soft: var(--c-accent-soft);
  --ui-link: var(--c-accent);
  --ui-danger: var(--c-neg);
  --ui-control-h: var(--control-h);
  --ui-shadow: var(--sh-1);

  --prop-chrome-radius: var(--r-md);
  --prop-chrome-border: 1px solid var(--c-border);
  --prop-chrome-bg: rgba(255, 255, 255, 0.03);
  --prop-chrome-bg-hover: rgba(255, 255, 255, 0.06);
  --prop-chrome-bg-active: var(--c-accent-soft);
  --prop-chrome-border-active: 1px solid transparent;
  --prop-chrome-label-size: var(--t-10);
  --prop-chrome-value-size: var(--t-13);
}

/* Light theme — warm paper; accent / status stay brand-aligned */
html[data-theme="light"] {
  color-scheme: light;

  --c-bg: #f4f1ec;
  --c-surface: #ffffff;
  --c-surface-2: #faf8f5;
  --c-surface-3: #f0ebe4;
  --c-elevated: #ffffff;

  --c-border: #e8e2da;
  --c-border-strong: #ddd5cb;
  --c-border-soft: rgba(18, 16, 14, 0.05);

  --c-text: #1c1916;
  --c-text-2: #6b635c;
  --c-text-3: #8f867d;
  --c-text-inv: #ffffff;

  --c-accent: #e8860f;
  --c-accent-hover: #d4780a;
  --c-accent-soft: rgba(232, 134, 15, 0.12);
  --c-accent-ring: rgba(232, 134, 15, 0.2);

  --c-pos: #1a9f63;
  --c-pos-soft: rgba(26, 159, 99, 0.12);
  --c-pos-border: rgba(26, 159, 99, 0.35);
  --c-neg: #d94841;
  --c-neg-soft: rgba(217, 72, 65, 0.12);
  --c-neg-border: rgba(217, 72, 65, 0.35);
  --c-warn: #c4920a;
  --c-warn-soft: rgba(196, 146, 10, 0.12);
  --c-warn-border: rgba(196, 146, 10, 0.35);
  --c-info: #2b7fd4;
  --c-info-soft: rgba(43, 127, 212, 0.12);
  --c-info-border: rgba(43, 127, 212, 0.35);

  --sh-1: 0 1px 4px rgba(28, 25, 22, 0.06);
  --sh-2: 0 6px 20px rgba(28, 25, 22, 0.08);
  --sh-3: 0 14px 40px rgba(28, 25, 22, 0.12);

  --chart-grid: rgba(212, 203, 192, 0.65);

  --prop-chrome-bg: rgba(28, 25, 22, 0.03);
  --prop-chrome-bg-hover: rgba(28, 25, 22, 0.05);
  --prop-chrome-border-active: 1px solid transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--t-14);
  line-height: 1.45;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  color: var(--c-text);
  font-weight: 600;
  line-height: 1.25;
}

h1, .text-h1 { font-size: var(--t-32); font-weight: 700; }
h2, .text-h2 { font-size: var(--t-26); font-weight: 700; }
h3, .text-h3 { font-size: var(--t-20); font-weight: 600; }
h4 { font-size: var(--t-16); }
h5 { font-size: var(--t-14); }
h6 { font-size: var(--t-13); }

p {
  margin: 0 0 1em;
  color: var(--c-text-2);
  max-width: 70ch;
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  color: var(--c-accent-hover);
  text-decoration: underline;
}

strong, b {
  font-weight: 600;
  color: var(--c-text);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--c-accent-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--c-accent-soft);
  color: var(--c-text);
}

/* Utility type */
.text-body { font-size: var(--t-14); font-weight: 400; line-height: 1.45; }
.text-secondary { font-size: var(--t-13); color: var(--c-text-2); }
.text-muted { font-size: var(--t-12); color: var(--c-text-3); }
.text-button { font-size: var(--t-14); font-weight: 600; line-height: 1; }
.text-label {
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.text-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (max-width: 900px) {
  :root {
    --app-header-h: calc(100px * var(--ui-scale));
  }
}