/* ================================================================
   TYTL · Workbench design tokens
   Lifted verbatim from property-workbench-v11.html. Component-scoped
   styles live inside each Lit element's static styles; this file
   holds only :root/theme blocks, page-level base styles, and
   selectors that can't easily be scoped (e.g. body grid layout).
   ================================================================ */
:root {
  --lime: #B7F402;
  --lime-deep: #7fad00;
  --lime-soft: #e8fbb3;
  --midnight: #073034;
  --midnight-deep: #042022;
  --midnight-soft: #1a484c;
  --wisteria: #B8a2eF;
  --wisteria-soft: #ece4ff;
  --mint: #2bc8a5;
  --mint-soft: #d4f0e7;
  --honeydew: #ecf6d5;
  --warning: #d97c1d;
  --warning-soft: #fce8d4;

  --display: 'Big Shoulders Display', 'PP Right Compact Dark', 'Archivo Black', sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px;

  --site-height: 56px;
}

:root[data-theme="light"] {
  --bg-canvas: #fafaf7;
  --bg-panel: #ffffff;
  --bg-panel-2: #f5f3ec;
  --bg-strip: #073034;

  --bg-row: #ffffff;
  --bg-row-site: #d9efe7;
  --bg-row-bldg: #ece4ff;
  --bg-row-sel: #fafce8;
  --bg-expanded: #f5fbd8;
  --bg-addr-list: #fafce8;

  --fg: #073034;
  --fg-2: #2a4a4d;
  --fg-mute: #5d7a7d;
  --fg-faint: #8a9b9d;
  --fg-strong: #073034;
  --fg-on-strip: #ffffff;

  --rule: #d8d5c8;
  --rule-soft: #e8e5d8;
  --rule-strong: #073034;

  --accent: #B7F402;
  --accent-deep: #7fad00;

  --bar-uprn: #cdc9b8;
  --bar-bloom: none;
  --bar-bloom-sel: 0 0 0 1px rgba(127,173,0,0.35);
  --bar-bloom-site: none;
  --bar-bloom-bldg: none;

  --map-bg: #d4cfbe;
  --map-line: #b9b09a;
  --map-link-hover-bg: rgba(7,48,52,0.04);
  --map-link-hover-border: var(--rule);

  --sticky-shadow-site: 0 1px 0 rgba(43,200,165,0.4), 0 4px 10px -4px rgba(7,48,52,0.08);
  --sticky-shadow-bldg: 0 1px 0 rgba(184,162,239,0.4), 0 4px 10px -4px rgba(7,48,52,0.08);
}

:root[data-theme="dark"] {
  --bg-canvas: #042022;
  --bg-panel: #073034;
  --bg-panel-2: #0b3a3e;
  --bg-strip: #042022;

  --bg-row: #073034;
  --bg-row-site: #0c3d3d;
  --bg-row-bldg: #14323e;
  --bg-row-sel: #0d3a36;
  --bg-expanded: #0a3835;
  --bg-addr-list: #061e20;

  --fg: #fafaf7;
  --fg-2: rgba(255, 255, 255, 0.82);
  --fg-mute: rgba(255, 255, 255, 0.55);
  --fg-faint: rgba(255, 255, 255, 0.32);
  --fg-strong: #B7F402;
  --fg-on-strip: #fafaf7;

  --rule: #1a484c;
  --rule-soft: #143b3e;
  --rule-strong: #1a484c;

  --accent: #B7F402;
  --accent-deep: #d4ff4a;

  --bar-uprn: #1f5358;
  --bar-bloom: 0 0 8px rgba(255,255,255,0.05);
  --bar-bloom-sel: 0 0 18px var(--lime), 0 0 5px var(--lime);
  --bar-bloom-site: 0 0 14px var(--mint), 0 0 4px var(--mint);
  --bar-bloom-bldg: 0 0 14px var(--wisteria), 0 0 4px var(--wisteria);

  --map-bg: #0b3a3e;
  --map-line: #1a484c;
  --map-link-hover-bg: rgba(255,255,255,0.05);
  --map-link-hover-border: var(--rule-soft);

  --sticky-shadow-site: 0 1px 0 rgba(43,200,165,0.5), 0 8px 18px -6px rgba(0,0,0,0.6);
  --sticky-shadow-bldg: 0 1px 0 rgba(184,162,239,0.5), 0 8px 18px -6px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--body);
  background: var(--bg-canvas);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transition: background-color 240ms ease, color 240ms ease;
}

.hidden { display: none !important; }