/**
 * BASTEEL Layout Tool — visual theme
 * Edit this file to change colors, backgrounds, borders, text, and shadows.
 * Layout dimensions (--panel, --right) stay in app.css.
 *
 * DIRECTION: "Blued Steel" — deep saturated blue-steel ground (gun-bluing) with a
 * vivid machined-brass accent, cyan signal, oxide-red alerts. High contrast,
 * powerful, the classic navy + gold pairing. Token NAMES unchanged
 * (navy/amber/steel…) so nothing downstream breaks; only the VALUES changed.
 */
:root {
  /* ── Backgrounds (deep blued steel — saturated blue, wide ladder) ── */
  --navy: #091426;
  --navy2: #102038;
  --navy3: #1a2e50;
  --steel: #29456a;
  --steel2: #3b5d8a;

  /* ── Text (cool bright) ───────────────────────────────────── */
  --white: #eef3fb;
  --dim: #8499b6;
  --text-on-accent: #091426;
  --text-on-danger: #ffffff;

  /* ── Borders ──────────────────────────────────────────────── */
  --border: #243a59;

  /* ── Accent & semantic (vivid machined brass) ──────────────── */
  --amber: #f2a82a;        /* machined brass-gold — primary accent */
  --amber2: #ffc64d;       /* bright brass — highlights */
  --green: #3fbf90;        /* teal-green — snap / success */
  --red: #e8593a;          /* oxide — alerts */
  --gate: #f2a82a;         /* gates read in brass */
  --select: #3db4d6;       /* cyan — selection */
  --undo: #9aa6d0;         /* cool periwinkle */
  --multi-select: #9aa6d0;

  /* ── Component-specific ────────────────────────────────────── */
  --swatch-border-selected: #eef3fb;
  --swatch-border-light: #8298b4;
  --accent-checkbox: var(--amber);

  /* ── Overlays (canvas HUD, legend) ─────────────────────────── */
  --overlay-bg: rgba(9, 20, 38, 0.9);
  --overlay-bg-soft: rgba(9, 20, 38, 0.82);
  --overlay-border-subtle: rgba(238, 243, 251, 0.08);
  --text-overlay-label: rgba(238, 243, 251, 0.4);
  --text-overlay-dim: rgba(238, 243, 251, 0.52);

  /* ── Panels (tinted backgrounds / borders) ─────────────────── */
  --panel-convert-bg: rgba(242, 168, 42, 0.09);
  --panel-convert-border: rgba(242, 168, 42, 0.36);
  --panel-edit-bg: rgba(61, 180, 214, 0.07);
  --cutlist-row-border: rgba(35, 56, 81, 0.5);

  /* ── Canvas chrome (not fence product colors) ──────────────── */
  --canvas-grid: rgba(58, 96, 142, 0.32);
  --canvas-grid-label: rgba(130, 152, 180, 0.55);
  --canvas-pen-stroke: rgba(242, 168, 42, 0.7);
  --canvas-pen-label-bg: rgba(9, 20, 38, 0.92);
  --canvas-pen-label-text: rgba(255, 198, 77, 0.98);
  --canvas-pen-anchor: #f2a82a;
  --canvas-box-select-fill: rgba(61, 180, 214, 0.12);
  --canvas-box-select-stroke: rgba(61, 180, 214, 0.9);
  --canvas-box-touch-stroke: rgba(242, 168, 42, 0.9);
  --canvas-origin-fill: rgba(242, 168, 42, 0.18);
  --canvas-origin-stroke: rgba(242, 168, 42, 0.65);
  --canvas-origin-text: rgba(242, 168, 42, 0.8);
  --canvas-snap: #3fbf90;
  --canvas-run-halo-fence: rgba(61, 180, 214, 0.3);
  --canvas-run-halo-gate: rgba(242, 168, 42, 0.3);
  --canvas-run-label-bg: rgba(9, 20, 38, 0.92);
  --canvas-run-label-select-fence: #63d2ee;
  --canvas-run-label-select-gate: #ffc64d;
  --canvas-post-corner: #ffc64d;
  --canvas-post-end: #eef3fb;
  --canvas-post-corner-stroke: #f2a82a;
  --canvas-gate-handle-fill: #f2a82a;
  --canvas-gate-handle-stroke: #ffc64d;
  --canvas-dim-stroke: #63d2ee;
  --canvas-dim-label-bg: rgba(9, 20, 38, 0.86);
  --canvas-align-guide: rgba(242, 168, 42, 0.6);

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-print-sheet: 0 4px 20px rgba(0, 0, 0, 0.55);

  /* ── Print preview window (browser print dialog UI) ────────── */
  --print-preview-bg: #555555;
  --print-preview-ctrl-bg: #091426;
  --print-preview-ctrl-text: #8298b4;
  --print-preview-btn-bg: #f2a82a;
  --print-preview-btn-text: #091426;
  --print-preview-sheet-bg: #ffffff;
}