:root {
  /* ── Brand palette (invariant) ───────────────────────────── */
  --fuji-orange:    #d4622a;
  --fuji-orange-lt: #e8855a;
  --fuji-silver:    #9ba3a8;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ── Transitions ─────────────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base:  220ms ease;
  --t-theme: 300ms ease;

  /* ── Glass effect ────────────────────────────────────────── */
  --glass-blur:   16px;
  --glass-border: 1px solid var(--panel-border);
  --glass-shadow: 0 8px 32px var(--shadow-color);

  /* ── Preview frame ───────────────────────────────────────── */
  --preview-pad: 20px;
}

/* ── Dark theme (default) ────────────────────────────────── */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --bg-page:        #14120f;
  --bg-noise:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");

  /* Panels (glass) */
  --panel-bg:       rgba(28, 24, 20, 0.72);
  --panel-bg-solid: #1e1a16;
  --panel-border:   rgba(255, 255, 255, 0.08);
  --panel-hover:    rgba(255, 255, 255, 0.04);

  /* Text */
  --text-primary:   #f0ebe2;
  --text-secondary: #b8b0a4;
  --text-muted:     #6e6660;

  /* Surfaces inside panels */
  --surface-1:      rgba(40, 35, 30, 0.6);
  --surface-2:      rgba(52, 46, 40, 0.5);
  --border-subtle:  rgba(255, 255, 255, 0.06);

  /* Input */
  --input-bg:       rgba(20, 17, 14, 0.7);
  --input-border:   rgba(255, 255, 255, 0.10);

  /* Shadows */
  --shadow-color:   rgba(0, 0, 0, 0.55);
  --shadow-panel:   0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,255,255,0.04) inset;

  /* Header */
  --header-bg:      rgba(18, 15, 12, 0.80);

  /* FAB */
  --fab-bg:         rgba(40, 35, 30, 0.85);
  --fab-border:     rgba(255, 255, 255, 0.10);
  --fab-color:      #b8b0a4;
  /* Filmstrip */
  --filmstrip-bg:   #0a0908;
  --filmstrip-rail: rgba(255, 255, 255, 0.06);

  /* Preview mat */
  --preview-bg:     #1c1916;
}

/* ── Light theme ─────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg-page:        #e8e2d8;
  --bg-noise:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  --panel-bg:       rgba(255, 252, 247, 0.68);
  --panel-bg-solid: #faf7f2;
  --panel-border:   rgba(0, 0, 0, 0.08);
  --panel-hover:    rgba(0, 0, 0, 0.03);

  --text-primary:   #1a1714;
  --text-secondary: #4a4540;
  --text-muted:     #8a8278;

  --surface-1:      rgba(255, 252, 246, 0.75);
  --surface-2:      rgba(240, 235, 228, 0.65);
  --border-subtle:  rgba(0, 0, 0, 0.07);

  --input-bg:       rgba(255, 255, 255, 0.7);
  --input-border:   rgba(0, 0, 0, 0.12);

  --shadow-color:   rgba(0, 0, 0, 0.12);
  --shadow-panel:   0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255,255,255,0.7) inset;

  --header-bg:      rgba(232, 226, 216, 0.85);

  --fab-bg:         rgba(255, 252, 247, 0.88);
  --fab-border:     rgba(0, 0, 0, 0.10);
  --fab-color:      #4a4540;

  /* Filmstrip */
  --filmstrip-bg:   #c8bfb0;
  --filmstrip-rail: rgba(0, 0, 0, 0.18);

  /* Preview mat */
  --preview-bg:     #d4cfc8;
}