refactor(design): single source of truth — wevisto-design.css

v2 tokens were duplicated: in design-v2.scss for the SPA, inlined in
login.html.twig for Twig. Two places to keep in sync.

Now: one shared /public/css/wevisto-design.css loaded by every Twig
standalone template AND linked from the SPA index.html. It contains:
- Brand constants (yellow / navy / fonts)
- v2 tokens with per-theme dusk overrides
- v2 base body bg + editorial typography defaults
- v2 overrides for the .card / .btn / .field-error / .logo-badge
  patterns used across all Twig templates

The SPA's design-v2.scss now holds only SPA-specific composition:
side rail at desktop, frame card, theme swatch harbor preview,
settings polish. No token duplication.

Result: changing a v2 color in one file flows to every surface in both
worlds. Adding v2 to another Twig template only requires the existing
shared CSS link (already wired up to all 11 standalone templates).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/css/wevisto-design.css

@@ -0,0 +1,164 @@
+/* ─── WeVisto · shared design tokens + base v2 overrides ────────────────
+ * Single source of truth for design tokens across Twig + Vue SPA.
+ * Loaded by every standalone Twig template AND by the SPA's main bundle.
+ * SPA-specific component styling lives in frontend/src/styles/design-v2.scss.
+ * ───────────────────────────────────────────────────────────────────── */
+
+@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
+
+/* ─── Brand constants — never change with theme/design ──────────────── */
+:root {
+  --brand-yellow: #f0d000;
+  --brand-yellow-soft: #c4a700;
+  --brand-navy: #0e2740;
+
+  /* v2 font stack — applied via [data-design="v2"] selectors below */
+  --font-display-v2: 'Marcellus', Georgia, serif;
+  --font-accent-v2:  'Cormorant Garamond', Georgia, serif;
+  --font-mono-v2:    'DM Mono', ui-monospace, monospace;
+}
+
+/* ─── v2 tokens — per-theme overrides ────────────────────────────────
+ * Each theme keeps its existing enum value; v2 just maps it to a "dusk".
+ * Twig templates and SPA components both read these via var(--color-*).
+ */
+[data-design="v2"] {
+  /* Default = warm-craft → "amber dusk" */
+  --color-bg:          #1a0d05;
+  --color-surface:     #2a1810;
+  --color-surface-2:   #3a241a;
+  --color-border:      rgba(230, 180, 130, 0.22);
+  --color-text:        #faecd0;
+  --color-text-muted:  #c8a880;
+  --color-primary:     #e89048;
+  --color-primary-fg:  #1a0d05;
+  --color-secondary:   #3a241a;
+  --color-secondary-fg:#faecd0;
+  --color-destructive: #e08070;
+  --color-destructive-fg: #ffffff;
+  --color-focus-ring:  var(--brand-yellow);
+}
+
+[data-design="v2"][data-theme="ocean-dusk"],
+[data-design="v2"]:not([data-theme]) {
+  /* ocean-dusk is the default for unauthenticated visitors (login/register) */
+  --color-bg: #06121f;
+  --color-surface: #0e2030;
+  --color-surface-2: #142a40;
+  --color-border: rgba(180,210,235,0.22);
+  --color-text: #f4eed8;
+  --color-text-muted: #b8c8d8;
+  --color-primary: #4e9fc8;
+  --color-primary-fg: #06121f;
+  --color-secondary: #142a40;
+}
+
+[data-design="v2"][data-theme="warm-craft"] {
+  --color-bg: #1a0d05; --color-surface: #2a1810; --color-surface-2: #3a241a;
+  --color-border: rgba(230,180,130,0.22);
+  --color-text: #faecd0; --color-text-muted: #c8a880;
+  --color-primary: #e89048; --color-primary-fg: #1a0d05;
+  --color-secondary: #3a241a;
+}
+
+[data-design="v2"][data-theme="sage-cream"] {
+  --color-bg: #081208; --color-surface: #142418; --color-surface-2: #1c3022;
+  --color-border: rgba(180,220,180,0.20);
+  --color-text: #ecf3e0; --color-text-muted: #a8c0a0;
+  --color-primary: #88c068; --color-primary-fg: #081208;
+  --color-secondary: #1c3022;
+}
+
+[data-design="v2"][data-theme="playful-pop"] {
+  --color-bg: #1a060f; --color-surface: #281020; --color-surface-2: #381a30;
+  --color-border: rgba(230,180,200,0.20);
+  --color-text: #f8e8ec; --color-text-muted: #d0a0b8;
+  --color-primary: #d878a0; --color-primary-fg: #1a060f;
+  --color-secondary: #381a30;
+}
+
+[data-design="v2"][data-theme="dusty-mauve"] {
+  --color-bg: #100618; --color-surface: #1c1028; --color-surface-2: #281a3a;
+  --color-border: rgba(210,190,230,0.20);
+  --color-text: #f0e8f8; --color-text-muted: #c0b0d0;
+  --color-primary: #b890d8; --color-primary-fg: #100618;
+  --color-secondary: #281a3a;
+}
+
+[data-design="v2"][data-theme="honey-slate"] {
+  --color-bg: #18120a; --color-surface: #281e10; --color-surface-2: #3a2c1a;
+  --color-border: rgba(232,200,130,0.22);
+  --color-text: #faf0d8; --color-text-muted: #d0b888;
+  --color-primary: #e8c050; --color-primary-fg: #18120a;
+  --color-secondary: #3a2c1a;
+}
+
+/* ─── v2 base body — solid navy with subtle gradient, no full-page photo
+ * Applies to BOTH Twig pages and the SPA. Component styles live elsewhere.
+ */
+[data-design="v2"] body {
+  background:
+    radial-gradient(ellipse 90% 70% at 50% 30%,
+      color-mix(in srgb, var(--color-surface-2) 80%, transparent) 0%,
+      transparent 70%),
+    var(--color-bg);
+  color: var(--color-text);
+}
+
+/* ─── v2 typography defaults — h1/h2/h3 become editorial display ──── */
+[data-design="v2"] h1,
+[data-design="v2"] h2,
+[data-design="v2"] h3 {
+  font-family: var(--font-display-v2);
+  font-weight: 400;
+  letter-spacing: 0.005em;
+  color: var(--color-text);
+}
+
+/* ─── v2 base overrides for the standalone Twig template patterns
+ * Every Twig template uses .card / .btn / .field-error / .logo-badge.
+ * These rules give them dusk styling automatically.
+ */
+[data-design="v2"] .card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
+  color: var(--color-text);
+}
+[data-design="v2"] .card label {
+  color: var(--color-text-muted);
+  font-family: var(--font-mono-v2);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+[data-design="v2"] .card input[type="email"],
+[data-design="v2"] .card input[type="password"],
+[data-design="v2"] .card input[type="text"] {
+  background: rgba(0,0,0,0.3);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+[data-design="v2"] .card input:focus {
+  border-color: var(--brand-yellow);
+}
+[data-design="v2"] .btn {
+  background: var(--color-primary);
+  color: var(--color-primary-fg);
+  font-weight: 700;
+}
+[data-design="v2"] .field-error { color: var(--color-destructive); }
+[data-design="v2"] .register-link {
+  color: var(--color-text-muted);
+  font-family: var(--font-accent-v2);
+  font-style: italic;
+}
+[data-design="v2"] .register-link a {
+  color: var(--brand-yellow);
+  font-style: normal;
+  font-family: inherit;
+}
+[data-design="v2"] .logo-badge {
+  border-color: var(--color-border);
+  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
+}