// Design tokens for Inova — editorial beauty tech
// Paper-white neutral + single warm rose-copper accent.

const T = {
  // surfaces
  paper: 'oklch(0.985 0.004 80)',        // near-white with warm tint
  paperAlt: 'oklch(0.965 0.006 80)',     // cards
  paperDeep: 'oklch(0.94 0.008 75)',     // elevated, input bg
  ink: 'oklch(0.18 0.01 70)',            // primary text
  inkSoft: 'oklch(0.42 0.01 70)',        // secondary
  inkMute: 'oklch(0.62 0.008 70)',       // tertiary/hint
  hairline: 'oklch(0.88 0.005 75)',      // dividers
  hairlineStrong: 'oklch(0.78 0.006 75)',

  // accent (warm rose-copper, shared chroma/lightness)
  accent: 'oklch(0.62 0.14 30)',
  accentDeep: 'oklch(0.52 0.14 30)',
  accentSoft: 'oklch(0.94 0.04 30)',
  accentInk: 'oklch(0.32 0.1 30)',

  // semantic (muted — no jarring greens/reds)
  ok: 'oklch(0.58 0.12 155)',
  okSoft: 'oklch(0.94 0.04 155)',
  warn: 'oklch(0.7 0.14 85)',
  warnSoft: 'oklch(0.95 0.05 85)',
  danger: 'oklch(0.55 0.16 25)',
  dangerSoft: 'oklch(0.94 0.04 25)',

  // type
  serif: '"Instrument Serif", "Cormorant Garamond", Georgia, serif',
  sans: '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',

  // radii
  r1: '10px',
  r2: '16px',
  r3: '22px',
  r4: '28px',
};

window.T = T;

// Utility: muted striped placeholder (for product imagery)
function PlaceholderTile({ label, w = '100%', h = 72, style = {}, tone = 'warm' }) {
  const stripes = tone === 'warm'
    ? 'repeating-linear-gradient(135deg, oklch(0.92 0.02 30) 0 6px, oklch(0.94 0.015 30) 6px 12px)'
    : 'repeating-linear-gradient(135deg, oklch(0.92 0.005 75) 0 6px, oklch(0.94 0.005 75) 6px 12px)';
  return (
    <div style={{
      width: w, height: h, background: stripes,
      border: `1px solid ${T.hairline}`,
      borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: T.mono, fontSize: 9, color: T.inkMute, letterSpacing: 0.5,
      textTransform: 'uppercase', position: 'relative', overflow: 'hidden',
      ...style,
    }}>
      {label && (
        <span style={{
          background: T.paper, padding: '2px 6px', borderRadius: 3,
          border: `1px solid ${T.hairline}`,
        }}>{label}</span>
      )}
    </div>
  );
}

// Small line icon system (stroke-based, 20px default)
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.5, style = {} }) {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', style,
  };
  const paths = {
    plus: <><path d="M12 5v14M5 12h14"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    scan: <><path d="M4 7V5a1 1 0 0 1 1-1h2M4 17v2a1 1 0 0 0 1 1h2M20 7V5a1 1 0 0 0-1-1h-2M20 17v2a1 1 0 0 1-1 1h-2"/><path d="M4 12h16"/></>,
    check: <><path d="M20 6 9 17l-5-5"/></>,
    close: <><path d="M18 6 6 18M6 6l12 12"/></>,
    chevronR: <><path d="m9 6 6 6-6 6"/></>,
    chevronL: <><path d="m15 6-6 6 6 6"/></>,
    chevronD: <><path d="m6 9 6 6 6-6"/></>,
    arrowR: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowUpR: <><path d="M7 17 17 7M7 7h10v10"/></>,
    edit: <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"/></>,
    trash: <><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    bag: <><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    pin: <><path d="M12 22s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12Z"/><circle cx="12" cy="10" r="2.5"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></>,
    send: <><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/></>,
    wa: <><path d="M17 3.5A10 10 0 0 0 4 16l-1 5 5-1a10 10 0 0 0 13-13 10 10 0 0 0-4-3.5z"/><path d="M8.5 9c0 4 3.5 7 7.5 7" strokeWidth="1.2"/></>,
    doc: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h6"/></>,
    filter: <><path d="M3 6h18M7 12h10M10 18h4"/></>,
    sparkle: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>,
    trending: <><path d="M22 7 13.5 15.5 8.5 10.5 2 17"/><path d="M16 7h6v6"/></>,
    bolt: <><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></>,
    home: <><path d="m3 11 9-8 9 8v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2V11z"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
    plusCircle: <><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></>,
    minus: <><path d="M5 12h14"/></>,
    star: <><path d="m12 2 3 7 7 .5-5 5 1.5 7-6.5-4-6.5 4L7 14.5l-5-5 7-.5 3-7z"/></>,
    info: <><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></>,
    barcode: <><path d="M3 5v14M6 5v14M9 5v14M13 5v14M16 5v14M19 5v14M21 5v14"/></>,
    camera: <><path d="M23 7l-5 3V7a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-3l5 3V7z"/></>,
    book: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5v14z"/><path d="M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5H6.5A2.5 2.5 0 0 0 4 19.5z"/></>,
  };
  return <svg {...props}>{paths[name] || null}</svg>;
}

window.PlaceholderTile = PlaceholderTile;
window.Icon = Icon;