// Design tokens for Seedex — calm, editorial, sprout-accented

const SEEDEX_THEMES = {
  paper: {
    bg: '#EFEBE3',       // warm off-white (paper)
    surface: '#F7F4EE',
    surfaceRaised: '#FFFFFF',
    ink: '#17110A',      // deep ink
    inkSoft: '#5A4E3F',
    inkFaint: '#9A8E7E',
    line: 'rgba(23,17,10,0.08)',
    lineStrong: 'rgba(23,17,10,0.14)',
    accent: '#3D5A3A',   // sage
    accentSoft: '#C9D6B8',
    accentInk: '#1E2E1D',
    warn: '#B8622E',
    isDark: false,
  },
  ink: {
    bg: '#0E0D0B',
    surface: '#17150F',
    surfaceRaised: '#1E1C16',
    ink: '#F4EFE4',
    inkSoft: '#B6AE9E',
    inkFaint: '#6E6654',
    line: 'rgba(244,239,228,0.08)',
    lineStrong: 'rgba(244,239,228,0.16)',
    accent: '#A9C48D',
    accentSoft: '#2E3A24',
    accentInk: '#DCE8C5',
    warn: '#D68A4D',
    isDark: true,
  },
};

const SEEDEX_FONTS = {
  display: '"Instrument Serif", "Iowan Old Style", Georgia, serif',
  sans: '"Inter Tight", -apple-system, system-ui, sans-serif',
  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
};

// Sprout glyph — grows with session activity
function Sprout({ stage = 2, size = 40, color = '#3D5A3A', soft = '#C9D6B8', style = {} }) {
  // stage 0: seed, 1: sprout, 2: leaf, 3: bloom
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 40 40" style={style}>
      {/* soil line */}
      <line x1="6" y1="34" x2="34" y2="34" stroke={color} strokeOpacity="0.3" strokeWidth="1" strokeDasharray="2 3"/>
      {stage === 0 && (
        <ellipse cx="20" cy="32" rx="4" ry="2.5" fill={color}/>
      )}
      {stage >= 1 && (
        <path d="M20 34 Q20 26 20 18" stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      )}
      {stage === 1 && (
        <>
          <path d="M20 22 Q14 20 12 14 Q18 14 20 20" fill={soft} stroke={color} strokeWidth="1.2" strokeLinejoin="round"/>
        </>
      )}
      {stage >= 2 && (
        <>
          <path d="M20 20 Q12 18 9 10 Q18 10 20 18" fill={soft} stroke={color} strokeWidth="1.2" strokeLinejoin="round"/>
          <path d="M20 14 Q28 12 31 4 Q22 4 20 12" fill={soft} stroke={color} strokeWidth="1.2" strokeLinejoin="round"/>
        </>
      )}
      {stage === 3 && (
        <circle cx="20" cy="8" r="3.5" fill={color}/>
      )}
    </svg>
  );
}

// Minimal icon set (stroke-based)
const SeedexIcons = {
  chat: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 4h14v10H8l-4 3V4z" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/></svg>,
  bell: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 8a5 5 0 0110 0v4l1.5 2.5h-13L5 12V8z" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/><path d="M8.5 17a1.5 1.5 0 003 0" stroke={c} strokeWidth="1.4" strokeLinecap="round"/></svg>,
  desktop: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="3" width="16" height="11" rx="1.5" stroke={c} strokeWidth="1.4"/><path d="M7 17h6M10 14v3" stroke={c} strokeWidth="1.4" strokeLinecap="round"/></svg>,
  wave: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 10h2l1.5-4 3 8 3-6 1.5 2h3" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  check: (c) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7.5l3 3 5-6" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  x: (c) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>,
  arrowUp: (c) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 13V3m0 0l-4 4m4-4l4 4" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  mic: (c) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="6" y="2" width="4" height="8" rx="2" stroke={c} strokeWidth="1.4"/><path d="M3 8a5 5 0 0010 0M8 13v2" stroke={c} strokeWidth="1.4" strokeLinecap="round"/></svg>,
  plus: (c) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  folder: (c) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4.5A1.5 1.5 0 013.5 3h3L8 4.5h4.5A1.5 1.5 0 0114 6v6a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 12V4.5z" stroke={c} strokeWidth="1.3"/></svg>,
  terminal: (c) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 4l3 4-3 4M8 12h5" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  dot: (c) => <circle cx="4" cy="4" r="3" fill={c}/>,
  pull: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 4v9m0 0l-4-4m4 4l4-4M4 16h12" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

Object.assign(window, { SEEDEX_THEMES, SEEDEX_FONTS, Sprout, SeedexIcons });