@import "tailwindcss";

@theme {
  /* Background layers */
  --color-bg: #0A0C0F;
  --color-surface: #14181D;
  --color-surface-raised: #1C2128;
  --color-line: #262C34;

  /* Brand */
  --color-primary: #E2001A;

  /* Text */
  --color-text: #F2F4F7;
  --color-muted: #9AA4B2;

  /* Data-semantic accents */
  --color-accent-purple: #A855F7;
  --color-accent-green: #22C55E;
  --color-accent-amber: #F59E0B;
  --color-accent-blue: #2F8FFF;

  /* Track canvas */
  --color-asphalt: #2c2c31;

  /* Typography */
  --font-display: "Saira Condensed", system-ui, sans-serif;
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Catalog thumbnail footprint classes — consumed by catalog_piece_controller.js.
   Using hand-written CSS so token-referenced fills compile regardless of whether
   the class names appear in scanned template files (Tailwind v4 JIT cannot see
   dynamically assigned class strings set from JavaScript). */
.footprint-fill {
  fill: var(--color-asphalt);
}

.footprint-slot {
  stroke: var(--color-line);
  stroke-width: 3;
}

.footprint-marking {
  stroke: var(--color-text);
  stroke-width: 1.5;
}

.footprint-marking--dashed {
  stroke-dasharray: 12 8;
}

.footprint-apron {
  fill: var(--color-muted);
}

/* .footprint-curb fill is set inline via url(#pattern-id) from the controller. */

/* Blueprint grid — the planner canvas background.
   Faint 1px lines on a ~28px grid over the deep canvas surface.
   Hand-written so the class name is always present for the JIT scanner. */
.blueprint-grid {
  background-color: #0b0e12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}