/* ===================================================================
   Design tokens - override any of these to re-theme the whole UI.
   Colors, spacing, radii, typography, shadows, z-index all live here.
   =================================================================== */
:root {
  /* color palette */
  --color-bg: #f9fafb;
  --color-panel: #fff;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-accent: #3b82f6;
  --color-selection: #3b82f6;
  --color-hover: #f3f4f6;
  --color-on-accent: #fff;
  --color-link: #1e5fbf;
  --color-grid: #c9ccd1;
  --color-guide: #f04770;

  /* translucent accents (derived look; kept as raw values for theming) */
  --color-selection-fill: rgba(59, 130, 246, .08);
  --color-brush-fill: rgba(59, 130, 246, .06);
  --color-code-bg: rgba(0, 0, 0, .08);
  --color-quote-border: rgba(0, 0, 0, .25);
  --color-rule: rgba(0, 0, 0, .2);

  /* typography */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-base: 0.8125rem;   /* 13px */
  --font-size-sm: 0.6875rem;     /* 11px */
  --font-size-md: 0.75rem;       /* 12px */
  --font-size-lg: 0.8125rem;     /* 13px */
  --line-base: 1.4;

  /* spacing scale */
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.625rem;
  --space-5: 0.75rem;
  --space-6: 1rem;

  /* radii */
  --radius-sm: 0.3125rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* sizing */
  --tool-size: 2.25rem;
  --tool-icon: 1.25rem;
  --swatch-size: 1.375rem;
  --panel-width: 12.5rem;

  /* effects */
  --shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  --border-width: 1px;

  /* z-index layers */
  --z-chrome: 10;
  --z-menu: 50;
  --z-hint: 5;

  /* aliases consumed by inline SVG styles generated in app.js */
  --sel: var(--color-selection);
  --border: var(--color-border);
  --muted: var(--color-muted);
}

/* ------------------------------------------------------------------ base */
* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-base);
  color: var(--color-text);
}

#app {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  touch-action: none;
}

/* ---------------------------------------------------------------- canvas */
.world-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

svg.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  display: block;
}

svg.overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.shape {
  cursor: default;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------- toolbar */
.toolbar {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: var(--z-chrome);
}

.tool {
  width: var(--tool-size);
  height: var(--tool-size);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.tool:hover {
  background: var(--color-hover);
}

.tool.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.tool svg {
  width: var(--tool-icon);
  height: var(--tool-icon);
  pointer-events: none;
}

/* ----------------------------------------------------------- style panel */
.stylepanel {
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  width: var(--panel-width);
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  z-index: var(--z-chrome);
}

.stylepanel h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.swatches {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.sw {
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
}

.sw.active {
  border-color: var(--color-text);
}

.row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.seg {
  flex: 1;
  padding: var(--space-3) 0;
  text-align: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.seg.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

/* ----------------------------------------------------------------- menus */
.topbar {
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  z-index: var(--z-chrome);
}

.btn {
  padding: 0.5rem 0.75rem;
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: var(--font-size-md);
}

.btn:hover {
  background: var(--color-hover);
}

.zoom {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-6);
  display: flex;
  gap: var(--space-1);
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: var(--z-chrome);
}

.zoom button {
  border: none;
  background: transparent;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  font-size: var(--font-size-lg);
}

.zoom button:hover {
  background: var(--color-hover);
}

.ctxmenu {
  position: absolute;
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--space-2);
  z-index: var(--z-menu);
  min-width: 10rem;
}

.ctxmenu div {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.ctxmenu div:hover {
  background: var(--color-hover);
}

.ctxmenu .kbd {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.ctxmenu hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-2) 0;
}

/* ---------------------------------------------------------- text editing */
.editor-text {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  -webkit-user-select: text;
  user-select: text;
  white-space: pre-wrap;
  transform-origin: 0 0;
}

/* rich-text (text shapes and shape labels) - sizes in em to scale with font */
.rich-text {
  line-height: 1.3;
}

.rich-text div,
.rich-text p {
  margin: 0;
}

.rich-text h1 {
  font-size: 1.6em;
  margin: .1em 0;
  font-weight: 700;
}

.rich-text h2 {
  font-size: 1.3em;
  margin: .1em 0;
  font-weight: 700;
}

.rich-text ul,
.rich-text ol {
  margin: .2em 0;
  padding-left: 1.3em;
}

.rich-text li {
  margin: 0;
}

.rich-text a {
  color: var(--color-link);
  text-decoration: underline;
}

/* markdown sticky notes */
.md-note {
  font-family: var(--font-sans);
}

.md-note h1,
.md-note h2,
.md-note h3 {
  margin: .2em 0;
  line-height: 1.2;
}

.md-note h1 { font-size: 1.5em; }
.md-note h2 { font-size: 1.25em; }
.md-note h3 { font-size: 1.1em; }

.md-note p,
.md-note div {
  margin: .15em 0;
}

.md-note ul,
.md-note ol {
  margin: .2em 0;
  padding-left: 1.2em;
}

.md-note li {
  margin: .05em 0;
}

.md-note code {
  background: var(--color-code-bg);
  padding: 0 .2em;
  border-radius: .2em;
  font-family: var(--font-mono);
  font-size: .9em;
}

.md-note pre {
  background: var(--color-code-bg);
  padding: .4em .55em;
  border-radius: .35em;
  margin: .3em 0;
  overflow: auto;
}

.md-note pre code {
  background: none;
  padding: 0;
  white-space: pre;
  display: block;
  font-size: .85em;
  line-height: 1.3;
}

.md-note blockquote {
  margin: .2em 0;
  padding-left: .6em;
  border-left: .2em solid var(--color-quote-border);
  color: var(--color-muted);
}

.md-note hr {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: .3em 0;
}

.md-note a {
  color: var(--color-link);
  text-decoration: underline;
}

.md-note del {
  opacity: .6;
}

/* ------------------------------------------------------------ selection UI */
.handle {
  fill: var(--color-panel);
  stroke: var(--color-selection);
  stroke-width: 1.5;
  cursor: pointer;
}

.rot-handle {
  fill: var(--color-panel);
  stroke: var(--color-selection);
  stroke-width: 1.5;
  cursor: grab;
}

.selbox {
  fill: none;
  stroke: var(--color-selection);
  stroke-width: 1.5;
}

.selfill {
  fill: var(--color-selection-fill);
  stroke: none;
}

.brush {
  fill: var(--color-brush-fill);
  stroke: var(--color-selection);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.hint {
  position: absolute;
  left: 50%;
  top: var(--space-5);
  transform: translateX(-50%);
  color: var(--color-muted);
  z-index: var(--z-hint);
  background: var(--color-panel);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
}