/* Master Spatial System — Sara Bensalem Skills
   Minimalist Studio Monochrome (Archival Bone, Deep Graphite & Hairline Drafting Borders) */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Strict Monochrome Gray Palette */
  --bg-canvas: #F8F8F5;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F1EB;
  --bg-surface-subtle: #E8E5DC;
  --border-subtle: #E8E5DC;
  --border-strong: #DDD9D0;
  --text-primary: #111110;
  --text-secondary: #55544E;
  --text-muted: #84827A;
  --accent-graphite: #161615;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-canvas);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  min-height: 100vh;
}

pre, code {
  font-family: var(--font-mono);
}

/* Drafting Canvas Layering */
#drafting-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Architectural Drafting Crosshairs & Rulers */
.ruler-tick {
  border-left: 1px solid var(--border-strong);
  height: 6px;
}

/* Smooth Transitions for Interactive Layers */
.tectonic-layer {
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.tectonic-layer:hover, .tectonic-layer.active {
  stroke-width: 2.5px !important;
  stroke: #111110 !important;
  filter: drop-shadow(0 2px 8px rgba(22, 22, 21, 0.15));
}