pictureFrame-webApp/_design/atmospheric-redesign/spa/_tokens.css

/* Atmospheric design tokens — themes as dusks layered over the harbor photo.
   The whole app shares the login's surface vocabulary. */

:root {
  /* Type — same recipe as login */
  --font-family:  'Nunito', system-ui, sans-serif;
  --font-display: 'Marcellus', Georgia, serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; --text-3xl: 36px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
  --duration-fast: 150ms; --duration-base: 250ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Brand layer — fixed regardless of theme. */
  --brand-yellow:      #f0d000;
  --brand-yellow-soft: #c4a700;

  /* Editorial recipes */
  --type-display-xl: 400 var(--text-3xl)/1.05 var(--font-display);
  --type-display-lg: 400 var(--text-2xl)/1.1  var(--font-display);
  --type-display-md: 400 var(--text-xl)/1.15  var(--font-display);
  --type-accent-md:  400 italic var(--text-md)/1.4 var(--font-accent);
  --type-label:      700 var(--text-xs)/1 var(--font-mono);
}

/* ─── DUSKS ──────────────────────────────────────────────────────────────
   Each dusk is:
     --bg-base    : the deep base color behind everything
     --bg-tint    : an rgba multiplied over the harbor photo (the "filter")
     --glass      : rgba background of cards (frosted, sits on photo)
     --glass-2    : a more opaque variant for nav strips
     --glass-bord : hairline border on glass surfaces
     --accent     : theme accent (was --color-primary) — CTAs that aren't brand
     --accent-fg  : text on accent
     --text       : main text on glass (always light)
     --text-muted : muted text on glass

   The yellow V brand constant survives across all dusks.
*/

/* OCEAN DUSK — default, closest to login */
[data-theme="ocean-dusk"], :root {
  --bg-base:    #06121f;
  --bg-tint:    rgba(8, 22, 38, 0.45);
  --glass:      rgba(10, 28, 48, 0.55);
  --glass-2:    rgba(8, 22, 38, 0.72);
  --glass-bord: rgba(180, 210, 235, 0.18);
  --accent:     #4e9fc8;
  --accent-fg:  #06121f;
  --text:       #f4eed8;
  --text-muted: #b8c8d8;
}

/* AMBER DUSK — successor to warm-craft */
[data-theme="amber-dusk"] {
  --bg-base:    #1a0d05;
  --bg-tint:    rgba(60, 25, 8, 0.45);
  --glass:      rgba(50, 22, 8, 0.55);
  --glass-2:    rgba(35, 14, 5, 0.72);
  --glass-bord: rgba(230, 180, 130, 0.2);
  --accent:     #e89048;
  --accent-fg:  #1a0d05;
  --text:       #faecd0;
  --text-muted: #d8b890;
}

/* SAGE DUSK — successor to sage-cream */
[data-theme="sage-dusk"] {
  --bg-base:    #081208;
  --bg-tint:    rgba(20, 40, 22, 0.45);
  --glass:      rgba(18, 38, 22, 0.55);
  --glass-2:    rgba(12, 26, 14, 0.72);
  --glass-bord: rgba(180, 220, 180, 0.18);
  --accent:     #88c068;
  --accent-fg:  #081208;
  --text:       #ecf3e0;
  --text-muted: #a8c0a0;
}

/* ROSE DUSK — warmer, classier replacement for playful-pop */
[data-theme="rose-dusk"] {
  --bg-base:    #1a060f;
  --bg-tint:    rgba(56, 16, 38, 0.45);
  --glass:      rgba(48, 14, 36, 0.55);
  --glass-2:    rgba(32, 8, 22, 0.72);
  --glass-bord: rgba(230, 180, 200, 0.2);
  --accent:     #d878a0;
  --accent-fg:  #1a060f;
  --text:       #f8e8ec;
  --text-muted: #c898ac;
}

/* MAUVE DUSK — replaces dusty-mauve */
[data-theme="mauve-dusk"] {
  --bg-base:    #100618;
  --bg-tint:    rgba(40, 18, 56, 0.45);
  --glass:      rgba(36, 14, 50, 0.55);
  --glass-2:    rgba(24, 10, 34, 0.72);
  --glass-bord: rgba(210, 190, 230, 0.18);
  --accent:     #b890d8;
  --accent-fg:  #100618;
  --text:       #f0e8f8;
  --text-muted: #b8a8c8;
}

/* HONEY DUSK — replaces honey-slate */
[data-theme="honey-dusk"] {
  --bg-base:    #18120a;
  --bg-tint:    rgba(48, 36, 14, 0.45);
  --glass:      rgba(42, 32, 12, 0.55);
  --glass-2:    rgba(28, 22, 8, 0.72);
  --glass-bord: rgba(232, 200, 130, 0.22);
  --accent:     #e8c050;
  --accent-fg:  #18120a;
  --text:       #faf0d8;
  --text-muted: #c8b888;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-base); color: var(--text); }
body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100dvh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ─── PERMANENT ATMOSPHERIC BACKDROP ──────────────────────────────────── */
/* harbor photo fixed under everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('../assets/harbor.jpg') center/cover no-repeat;
  filter: brightness(0.6) saturate(0.85);
  z-index: -3;
}
/* theme tint multiplied over photo */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-tint);
  mix-blend-mode: multiply;
  z-index: -2;
  pointer-events: none;
}
/* global vignette + film grain via one extra layer */
.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.65) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.1 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
}