pictureFrame-webApp/public/css/wevisto-design.css

/* ─── 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 — Camogli harbor backdrop with theme-tinted overlay
 * Applies to BOTH Twig pages and the SPA. Component styles live elsewhere.
 */
[data-design="v2"] body {
  color: var(--color-text);
  background: var(--color-bg);
  position: relative;
  min-height: 100dvh;
}
[data-design="v2"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/build/assets/harbor.jpg') center/cover no-repeat;
  filter: brightness(0.42) saturate(0.85);
  z-index: -3;
}
[data-design="v2"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 100%),
    var(--color-bg);
  opacity: 0.72;
  mix-blend-mode: multiply;
  z-index: -2;
  pointer-events: none;
}

/* ─── 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);
}