Add custom dark theme with Fichero brand blue accent

Replace Bootstrap default dark grays and hardcoded colors with a
design-token system: surface levels, ink hierarchy, logo blue (#07addf)
as the single accent, mark-feed red for print indicators. Card browsers
get rounded corners, subtle borders, and hover-reveal action buttons.

web/src/components/LabelDesigner.svelte

@@ -548,14 +548,14 @@
 
 <style>
   .canvas-wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--border-standard);
-    background-color: rgba(60, 55, 63, 0.5);
+    background-color: var(--surface-1);
   }
   .canvas-wrapper.print-start-left {
-    border-left: 2px solid #ff4646;
+    border-left: 2px solid var(--mark-feed);
   }
   .canvas-wrapper.print-start-top {
-    border-top: 2px solid #ff4646;
+    border-top: 2px solid var(--mark-feed);
   }
   .canvas-wrapper canvas {
     image-rendering: pixelated;

web/src/components/PrintPreview.svelte

@@ -595,14 +595,14 @@
 <style>
   canvas {
     image-rendering: pixelated;
-    border: 1px solid #6d6d6d;
+    border: 1px solid var(--border-emphasis);
     max-width: 100%;
   }
   canvas.print-start-left {
-    border-left: 2px solid #ff4646;
+    border-left: 2px solid var(--mark-feed);
   }
   canvas.print-start-top {
-    border-top: 2px solid #ff4646;
+    border-top: 2px solid var(--mark-feed);
   }
   .progress-bar {
     transition: none;

web/src/components/designer-controls/LabelPresetsBrowser.svelte

@@ -89,34 +89,52 @@
   .card-wrapper {
     width: 96px;
     height: 96px;
+    border-radius: var(--radius-sm);
+    transition: background-color 0.15s;
+  }
+
+  .card-wrapper:hover {
+    background-color: var(--surface-1);
   }
 
   .card {
-    background-color: white;
+    background-color: var(--surface-2);
+    border: 1px solid var(--border-standard);
+    border-radius: var(--radius-sm);
     position: relative;
+    overflow: hidden;
   }
 
   .card > .remove {
     position: absolute;
     top: 0;
     right: 0;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .card-wrapper:hover .remove {
+    opacity: 1;
   }
 
   .card > .remove > button {
     padding: 0;
     line-height: 100%;
+    font-size: 0.75rem;
   }
 
   .card > .label {
-    background-color: rgba(255, 255, 255, 0.8);
+    color: var(--ink-secondary);
-    color: black;
+    font-size: 0.7rem;
-    border-radius: 8px;
+    line-height: 1.2;
+    text-align: center;
+    padding: 2px 4px;
   }
 
   .card.print-start-left {
-    border-left: 2px solid #ff4646;
+    border-left: 2px solid var(--mark-feed);
   }
   .card.print-start-top {
-    border-top: 2px solid #ff4646;
+    border-top: 2px solid var(--mark-feed);
   }
 </style>

web/src/components/designer-controls/SavedLabelsBrowser.svelte

@@ -105,11 +105,20 @@
   .card-wrapper {
     width: 96px;
     height: 96px;
+    border-radius: var(--radius-sm);
+    transition: background-color 0.15s;
+  }
+
+  .card-wrapper:hover {
+    background-color: var(--surface-1);
   }
 
   .card {
-    background-color: white;
+    background-color: var(--surface-2);
+    border: 1px solid var(--border-standard);
+    border-radius: var(--radius-sm);
     position: relative;
+    overflow: hidden;
   }
 
   .card > .buttons {
@@ -117,25 +126,39 @@
     top: 0;
     right: 0;
     z-index: 2;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .card-wrapper:hover .buttons {
+    opacity: 1;
   }
 
   .card > .buttons > button {
     padding: 0;
     line-height: 100%;
+    font-size: 0.75rem;
   }
 
   .card > .label {
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.55);
-    color: black;
+    color: var(--ink-primary);
-    border-radius: 8px;
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
     z-index: 1;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
   }
 
   .card.print-start-left {
-    border-left: 2px solid #ff4646;
+    border-left: 2px solid var(--mark-feed);
   }
   .card.print-start-top {
-    border-top: 2px solid #ff4646;
+    border-top: 2px solid var(--mark-feed);
   }
 
   .card .thumbnail {

web/src/styles/style.scss

@@ -12,6 +12,7 @@
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/transitions";
+@import "theme";
 @import "font";
 
 body {

web/src/styles/theme.scss

@@ -0,0 +1,211 @@
+// Fichero custom dark theme
+// Pure CSS custom property overrides applied after Bootstrap loads.
+
+// ── Design tokens ──────────────────────────────────────────────
+
+:root {
+  // Surfaces (cool neutral darks)
+  --surface-0: #161819;
+  --surface-1: #1c1e20;
+  --surface-2: #232628;
+  --surface-3: #2a2d30;
+
+  // Text
+  --ink-primary: #e4e7eb;
+  --ink-secondary: #949ba4;
+  --ink-tertiary: #5d6670;
+  --ink-muted: #3a4048;
+
+  // Accent (Fichero logo blue)
+  --fichero: #07addf;
+  --fichero-hover: #0699c7;
+  --fichero-subtle: rgba(7, 173, 223, 0.10);
+  --fichero-rgb: 7, 173, 223;
+
+  // Functional (print-start indicator)
+  --mark-feed: #e85454;
+
+  // Semantic
+  --status-ok: #6bb88a;
+  --status-ok-rgb: 107, 184, 138;
+  --status-warn: #d4a24c;
+  --status-warn-rgb: 212, 162, 76;
+  --status-danger: #d45454;
+  --status-danger-rgb: 212, 84, 84;
+
+  // Borders
+  --border-standard: rgba(228, 231, 235, 0.08);
+  --border-soft: rgba(228, 231, 235, 0.05);
+  --border-emphasis: rgba(228, 231, 235, 0.14);
+  --border-focus: rgba(7, 173, 223, 0.5);
+
+  // Controls
+  --control-bg: #141617;
+  --control-border: rgba(228, 231, 235, 0.10);
+
+  // Radii
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+}
+
+// ── Bootstrap dark-mode overrides ──────────────────────────────
+
+[data-bs-theme="dark"] {
+  // Body
+  --bs-body-bg: var(--surface-0);
+  --bs-body-bg-rgb: 22, 24, 25;
+  --bs-body-color: var(--ink-primary);
+  --bs-body-color-rgb: 228, 231, 235;
+
+  // Secondary / tertiary
+  --bs-secondary-bg: var(--surface-1);
+  --bs-secondary-color: var(--ink-secondary);
+  --bs-tertiary-bg: var(--surface-2);
+  --bs-tertiary-color: var(--ink-tertiary);
+
+  // Borders
+  --bs-border-color: var(--border-standard);
+  --bs-border-color-translucent: var(--border-standard);
+
+  // Theme colors
+  --bs-primary: var(--fichero);
+  --bs-primary-rgb: var(--fichero-rgb);
+  --bs-danger: var(--status-danger);
+  --bs-danger-rgb: var(--status-danger-rgb);
+  --bs-success: var(--status-ok);
+  --bs-success-rgb: var(--status-ok-rgb);
+  --bs-warning: var(--status-warn);
+  --bs-warning-rgb: var(--status-warn-rgb);
+
+  // Subtle backgrounds (toasts, alerts)
+  --bs-primary-bg-subtle: var(--fichero-subtle);
+  --bs-primary-text-emphasis: var(--fichero);
+  --bs-danger-bg-subtle: rgba(212, 84, 84, 0.10);
+  --bs-danger-border-subtle: rgba(212, 84, 84, 0.25);
+  --bs-danger-text-emphasis: #e87070;
+  --bs-success-bg-subtle: rgba(107, 184, 138, 0.10);
+  --bs-success-border-subtle: rgba(107, 184, 138, 0.25);
+  --bs-success-text-emphasis: #85d0a4;
+  --bs-warning-bg-subtle: rgba(212, 162, 76, 0.10);
+  --bs-warning-border-subtle: rgba(212, 162, 76, 0.25);
+  --bs-warning-text-emphasis: #e0b86a;
+
+  // Links
+  --bs-link-color: var(--fichero);
+  --bs-link-color-rgb: var(--fichero-rgb);
+  --bs-link-hover-color: var(--fichero-hover);
+
+  // Focus ring
+  --bs-focus-ring-color: var(--border-focus);
+
+  // Border radii
+  --bs-border-radius: var(--radius-sm);
+  --bs-border-radius-lg: var(--radius-md);
+  --bs-border-radius-xl: var(--radius-lg);
+}
+
+// ── Button overrides ───────────────────────────────────────────
+
+.btn-primary {
+  --bs-btn-bg: var(--fichero);
+  --bs-btn-border-color: var(--fichero);
+  --bs-btn-color: #fff;
+  --bs-btn-hover-bg: var(--fichero-hover);
+  --bs-btn-hover-border-color: var(--fichero-hover);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-bg: var(--fichero-hover);
+  --bs-btn-active-border-color: var(--fichero-hover);
+  --bs-btn-active-color: #fff;
+  --bs-btn-disabled-bg: var(--fichero);
+  --bs-btn-disabled-border-color: var(--fichero);
+  --bs-btn-disabled-color: #fff;
+}
+
+.btn-secondary {
+  --bs-btn-bg: var(--surface-2);
+  --bs-btn-border-color: var(--border-standard);
+  --bs-btn-color: var(--ink-primary);
+  --bs-btn-hover-bg: var(--surface-3);
+  --bs-btn-hover-border-color: var(--border-emphasis);
+  --bs-btn-hover-color: var(--ink-primary);
+  --bs-btn-active-bg: var(--surface-3);
+  --bs-btn-active-border-color: var(--border-emphasis);
+  --bs-btn-active-color: var(--ink-primary);
+}
+
+.btn-danger {
+  --bs-btn-bg: var(--status-danger);
+  --bs-btn-border-color: var(--status-danger);
+  --bs-btn-hover-bg: #c04848;
+  --bs-btn-hover-border-color: #c04848;
+  --bs-btn-active-bg: #c04848;
+  --bs-btn-active-border-color: #c04848;
+}
+
+.btn-outline-secondary {
+  --bs-btn-color: var(--ink-secondary);
+  --bs-btn-border-color: var(--border-emphasis);
+  --bs-btn-hover-bg: var(--surface-2);
+  --bs-btn-hover-border-color: var(--border-emphasis);
+  --bs-btn-hover-color: var(--ink-primary);
+}
+
+.btn-light {
+  --bs-btn-bg: var(--surface-2);
+  --bs-btn-border-color: var(--border-standard);
+  --bs-btn-color: var(--ink-primary);
+  --bs-btn-hover-bg: var(--surface-3);
+  --bs-btn-hover-border-color: var(--border-emphasis);
+  --bs-btn-hover-color: var(--ink-primary);
+}
+
+// ── Form controls ──────────────────────────────────────────────
+
+.form-control,
+.form-select {
+  background-color: var(--control-bg);
+  border-color: var(--control-border);
+  color: var(--ink-primary);
+
+  &:focus {
+    background-color: var(--control-bg);
+    border-color: var(--fichero);
+    color: var(--ink-primary);
+    box-shadow: 0 0 0 0.2rem var(--border-focus);
+  }
+}
+
+.input-group-text {
+  background-color: var(--surface-2);
+  border-color: var(--control-border);
+  color: var(--ink-secondary);
+}
+
+// ── Dropdowns ──────────────────────────────────────────────────
+
+.dropdown-menu {
+  --bs-dropdown-bg: var(--surface-2);
+  --bs-dropdown-border-color: var(--border-emphasis);
+  --bs-dropdown-link-color: var(--ink-primary);
+  --bs-dropdown-link-hover-bg: var(--surface-3);
+  --bs-dropdown-link-hover-color: var(--ink-primary);
+  --bs-dropdown-link-active-bg: var(--fichero-subtle);
+  --bs-dropdown-link-active-color: var(--fichero);
+  border-radius: var(--radius-lg);
+}
+
+// ── Modals ─────────────────────────────────────────────────────
+
+.modal-content {
+  --bs-modal-bg: var(--surface-3);
+  --bs-modal-border-color: var(--border-emphasis);
+  border-radius: var(--radius-lg);
+}
+
+// ── Progress bar ───────────────────────────────────────────────
+
+.progress {
+  --bs-progress-bg: var(--surface-1);
+  --bs-progress-bar-bg: var(--fichero);
+}