// themes.jsx — Riso Zine light + dark variant (neon-inspired).

const THEMES = {
  risoLight: {
    key: 'risoLight',
    name: 'RISO ZINE',
    mode: 'light',
    tagline: 'Soft riso print. Cream paper. Cozy ink overlap.',
    bg:         '#f3e9d2',
    bgAlt:      '#ead8b6',
    surface:    '#fff8e3',
    surfaceAlt: '#f7ecc8',
    fg:         '#1a1305',
    fgMute:     'rgba(26,19,5,0.65)',
    fgDim:      'rgba(26,19,5,0.4)',
    border:     'rgba(26,19,5,0.18)',
    primary:    '#e8553c',   // riso red-orange
    yellow:     '#f5b82e',   // riso mustard
    cyan:       '#2a52be',   // riso ultramarine
    red:        '#c92a1d',
    green:      '#3a7d44',
    fontDisplay: '"Rubik Mono One", Impact, serif',
    fontHead:    '"Fraunces", Georgia, serif',
    fontBody:    '"DM Mono", monospace',
    fontPinyin:  '"DM Mono", monospace',
    fontCN:      '"Fraunces", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif',
    grain:       'paper',
    motif:       'riso',
    radius:      14,
    chunky:      true,
    mascotWood:  '#e8553c',
    mascotShade: '#c43d27',
    mascotInk:   '#1a1305',
  },

  // Dark variant — same riso DNA (halftone, ink-overlap), but inverted to a
  // black-light zine palette borrowed from Neon Punk. Hot pink + acid yellow +
  // cyan accents punch through deep ink.
  risoDark: {
    key: 'risoDark',
    name: 'RISO NEON',
    mode: 'dark',
    tagline: 'Black-light zine. Riso halftone. High-voltage type.',
    bg:         '#0d0d10',
    bgAlt:      '#16161b',
    surface:    '#1c1c22',
    surfaceAlt: '#23232b',
    fg:         '#fff8e3',                 // cream (not pure white — preserves riso warmth)
    fgMute:     'rgba(255,248,227,0.7)',
    fgDim:      'rgba(255,248,227,0.4)',
    border:     'rgba(255,248,227,0.16)',
    primary:    '#ff3aa0',                 // hot pink
    yellow:     '#ffe24a',                 // acid yellow
    cyan:       '#22e3ff',                 // electric cyan
    red:        '#ff4d3a',
    green:      '#5cff7a',
    fontDisplay: '"Rubik Mono One", Impact, serif',
    fontHead:    '"Fraunces", Georgia, serif',
    fontBody:    '"DM Mono", monospace',
    fontPinyin:  '"DM Mono", monospace',
    fontCN:      '"Fraunces", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif',
    grain:       'dark',
    motif:       'riso',
    radius:      14,
    chunky:      true,
    mascotWood:  '#ff3aa0',
    mascotShade: '#c41e74',
    mascotInk:   '#0d0d10',
  },
};

const DENSITIES = {
  chunky: { pad: 1.15, btnH: 56, gap: 1.2, titleScale: 1.05 },
  sleek:  { pad: 0.78, btnH: 42, gap: 0.85, titleScale: 0.9 },
};

function grainBg(theme) {
  if (theme.grain === 'dark') {
    return `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`;
  }
  if (theme.grain === 'paper') {
    return `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.34  0 0 0 0 0.24  0 0 0 0 0.06  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`;
  }
  return 'none';
}

function halftone(color, size = 1.4, spacing = 9) {
  const enc = encodeURIComponent(color);
  return `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='${spacing}' height='${spacing}'><circle cx='${spacing/2}' cy='${spacing/2}' r='${size/2}' fill='${enc}'/></svg>")`;
}

function wave(color, h = 6) {
  const enc = encodeURIComponent(color);
  return `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='${h}' viewBox='0 0 24 ${h}' preserveAspectRatio='none'><path d='M0 ${h/2} Q 6 0, 12 ${h/2} T 24 ${h/2}' stroke='${enc}' stroke-width='2' fill='none'/></svg>")`;
}

const stampStyle = (theme, color) => ({
  border: `2.5px solid ${color || theme.fg}`,
  borderRadius: theme.radius * 0.7,
  padding: '6px 10px',
  display: 'inline-block',
  fontFamily: theme.fontHead,
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
});

// Background composition shared across screens.
function motifBg(theme) {
  const accent = theme.mode === 'dark' ? theme.primary : theme.primary;
  return `${halftone(accent, 1.2, 9)}, ${grainBg(theme)}, linear-gradient(180deg, ${theme.bg} 0%, ${theme.bgAlt} 100%)`;
}

Object.assign(window, {
  THEMES, DENSITIES, grainBg, halftone, wave, stampStyle, motifBg,
});