// MissionChef App — Design Tokens + shared primitives
// Consumed by every app screen. Light + Dark theme driven by data-theme on root.

const MC = {
  // brand
  leaf:    '#AEC854',
  leaf700: '#6E8A28',
  leaf900: '#3F5010',
  ember:   '#D9642C',
  ember700:'#A84A1E',

  // neutral / light
  cream:   '#FBF7EE',
  paper:   '#F4EFE2',
  linen:   '#ECE4D1',
  ink:     '#1B1B17',
  mud:     '#564F47',
  stone:   '#8A8178',
  fog:     '#C8BFAC',
  rule:    '#E1D9C5',

  // status
  ok:      '#6E8A28',
  warn:    '#D9642C',
  bad:     '#B0321F',
  info:    '#2D6A7A',
};

// CSS variables so the app can theme-switch.
const mcThemeCSS = `
  :root, [data-theme="light"] {
    --mc-leaf: ${MC.leaf};
    --mc-leaf-700: ${MC.leaf700};
    --mc-leaf-900: ${MC.leaf900};
    --mc-ember: ${MC.ember};
    --mc-ember-700: ${MC.ember700};

    --mc-bg: ${MC.cream};
    --mc-surface: #FFFFFF;
    --mc-surface-2: ${MC.paper};
    --mc-surface-3: ${MC.linen};
    --mc-ink: ${MC.ink};
    --mc-ink-muted: ${MC.mud};
    --mc-ink-dim: ${MC.stone};
    --mc-rule: ${MC.rule};
    --mc-rule-strong: ${MC.fog};

    --mc-ok: ${MC.ok};
    --mc-warn: ${MC.ember};
    --mc-bad: ${MC.bad};
    --mc-info: ${MC.info};

    --mc-shadow: 0 1px 0 rgba(27,27,23,.04), 0 12px 32px -18px rgba(27,27,23,.18);
  }
  [data-theme="dark"] {
    --mc-leaf: #C4DE6A;
    --mc-leaf-700: #AEC854;
    --mc-leaf-900: #6E8A28;
    --mc-ember: #E97A3E;
    --mc-ember-700: #D9642C;

    --mc-bg: #111110;
    --mc-surface: #1B1B17;
    --mc-surface-2: #232320;
    --mc-surface-3: #2D2C27;
    --mc-ink: #F4EFE2;
    --mc-ink-muted: #B8AE9A;
    --mc-ink-dim: #8A8178;
    --mc-rule: #2E2D28;
    --mc-rule-strong: #3D3B34;

    --mc-ok: #AEC854;
    --mc-warn: #E97A3E;
    --mc-bad: #E0563F;
    --mc-info: #7BB0BD;

    --mc-shadow: 0 1px 0 rgba(0,0,0,.3), 0 20px 40px -22px rgba(0,0,0,.6);
  }

  /* Theme roots inherit ink color so any subtree (modals, mobile frames,
     dark-canvas-cells) reads correctly without per-component color resets. */
  :root, [data-theme="light"], [data-theme="dark"] {
    color: var(--mc-ink);
  }

  .mc-app {
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: 'ss01', 'ss02';
    color: var(--mc-ink);
    background: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
  }
  .mc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: normal; }

  .mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-rule);
    color: var(--mc-ink);
  }
  .mc-card-2 {
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-rule);
    color: var(--mc-ink);
  }
  .mc-ink-ink   { color: var(--mc-ink); }
  .mc-ink-muted { color: var(--mc-ink-muted); }
  .mc-ink-dim   { color: var(--mc-ink-dim); }

  .mc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 3px 8px; font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: var(--mc-surface-2);
    color: var(--mc-ink-muted);
    border: 1px solid var(--mc-rule);
  }

  .mc-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500; font-size: 14px;
    padding: 10px 16px;
    border: 1.5px solid var(--mc-ink);
    background: var(--mc-ink); color: var(--mc-bg);
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: -0.005em; transition: transform .08s ease;
  }
  .mc-btn:active { transform: translateY(1px); }
  .mc-btn.ghost { background: transparent; color: var(--mc-ink); }
  .mc-btn.leaf  { background: var(--mc-leaf); color: #1B1B17; border-color: var(--mc-leaf); }
  .mc-btn.ember { background: var(--mc-ember); color: #FBF7EE; border-color: var(--mc-ember); }
  .mc-btn.sm    { font-size: 12px; padding: 7px 12px; }

  .mc-input {
    font-family: 'Space Grotesk', sans-serif; font-size: 14px;
    padding: 10px 12px; background: var(--mc-surface);
    border: 1px solid var(--mc-rule);
    color: var(--mc-ink); outline: none;
    width: 100%; box-sizing: border-box;
  }
  .mc-input:focus { border-color: var(--mc-leaf-700); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mc-leaf) 35%, transparent); }

  .mc-divider { height: 1px; background: var(--mc-rule); }

  /* scrollbar light */
  .mc-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .mc-scroll::-webkit-scrollbar-thumb { background: var(--mc-rule-strong); border-radius: 999px; }
  .mc-scroll::-webkit-scrollbar-track { background: transparent; }

  /* typography scale — LUFTIG */
  .mc-h1 { font-size: 44px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; }
  .mc-h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
  .mc-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
  .mc-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mc-ink-dim); }
  .mc-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

  /* row hover */
  .mc-row { transition: background .1s ease; }
  .mc-row:hover { background: var(--mc-surface-2); }

  /* toque SVG color inherit */
  .mc-logo-toque rect { fill: var(--mc-leaf); }
  .mc-logo-toque circle, .mc-logo-toque rect + g rect { fill: #FFFFFF; }
`;

// Formatters
const fmtEUR = (n) => '€' + (Math.round(n * 100) / 100).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fmtINT = (n) => Math.round(n).toLocaleString('de-DE');
const fmtPCT = (n, d = 1) => (n >= 0 ? '+' : '') + n.toFixed(d) + '%';
const fmtTIME = (d) => d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
const fmtDATE = (d) => d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' });
const fmtWEEKDAY = (d) => d.toLocaleDateString('de-DE', { weekday: 'short' });

// Shared MC Icon (extended)
function McIcon2({ name, size = 20, color = 'currentColor', stroke = 1.6 }) {
  const paths = {
    plate:    <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /></>,
    toque:    <><path d="M6 13c-2 0-3-1-3-3s1.5-3 3-3c0-2 2-4 6-4s6 2 6 4c1.5 0 3 1 3 3s-1 3-3 3M6 13v6h12v-6M6 17h12" /></>,
    flame:    <><path d="M12 3c4 5 6 8 6 11a6 6 0 1 1-12 0c0-3 2-6 6-11Z" /><path d="M12 11c2 2.5 3 4.5 3 6a3 3 0 1 1-6 0c0-1.5 1-3.5 3-6Z" /></>,
    knife:    <><path d="M3 18 L18 4l3 3L6 21Z" /><path d="M15 7l3 3" /></>,
    cart:     <><circle cx="9" cy="20" r="1.5" /><circle cx="17" cy="20" r="1.5" /><path d="M3 4h2l2 12h12l2-8H7" /></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></>,
    stock:    <><path d="M4 7l8-4 8 4-8 4-8-4Z" /><path d="M4 12l8 4 8-4M4 17l8 4 8-4" /></>,
    team:     <><circle cx="9" cy="9" r="3" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5" /><circle cx="17" cy="8" r="2.5" /><path d="M15 15c3 0 6 2 6 5" /></>,
    receipt:  <><path d="M6 3h12v18l-3-2-3 2-3-2-3 2Z" /><path d="M9 8h6M9 12h6M9 16h4" /></>,
    truck:    <><rect x="2" y="7" width="11" height="9" /><path d="M13 10h5l3 3v3h-8" /><circle cx="7" cy="17" r="1.8" /><circle cx="17" cy="17" r="1.8" /></>,
    dashboard:<><rect x="3" y="3" width="7" height="9" /><rect x="14" y="3" width="7" height="5" /><rect x="14" y="12" width="7" height="9" /><rect x="3" y="16" width="7" height="5" /></>,
    chart:    <><path d="M3 21h18" /><path d="M6 17V9M10 17V5M14 17v-6M18 17v-9" /></>,
    settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></>,
    clock:    <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    search:   <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    plus:     <><path d="M12 5v14M5 12h14" /></>,
    x:        <><path d="M6 6l12 12M18 6L6 18" /></>,
    check:    <><path d="M4 12l5 5L20 6" /></>,
    arrow:    <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    back:     <><path d="M19 12H5M11 6l-6 6 6 6" /></>,
    bell:     <><path d="M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8" /><path d="M10 21a2 2 0 0 0 4 0" /></>,
    user:     <><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" /></>,
    filter:   <><path d="M3 5h18M6 12h12M10 19h4" /></>,
    drag:     <><circle cx="9" cy="6" r="1.2" /><circle cx="15" cy="6" r="1.2" /><circle cx="9" cy="12" r="1.2" /><circle cx="15" cy="12" r="1.2" /><circle cx="9" cy="18" r="1.2" /><circle cx="15" cy="18" r="1.2" /></>,
    sun:      <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></>,
    moon:     <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" /></>,
    menu:     <><path d="M4 6h16M4 12h16M4 18h16" /></>,
    phone:    <><rect x="7" y="2" width="10" height="20" rx="2" /><path d="M11 18h2" /></>,
    mail:     <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></>,
    edit:     <><path d="M4 20h4L20 8l-4-4L4 16v4Z" /></>,
    trash:    <><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></>,
    eur:      <><path d="M17 5a7 7 0 1 0 0 14" /><path d="M4 10h10M4 14h8" /></>,
    swap:     <><path d="M7 7h13l-3-3M17 17H4l3 3" /></>,
    fire:     <><path d="M12 3c4 5 6 8 6 11a6 6 0 1 1-12 0c0-3 2-6 6-11Z" /></>,
    megaphone:<><path d="M3 11v2a2 2 0 0 0 2 2h2l8 4V5L7 9H5a2 2 0 0 0-2 2Z" /><path d="M18 8a4 4 0 0 1 0 8" /></>,
    image:    <><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="10" r="2" /><path d="m3 18 6-5 4 3 4-4 4 4" /></>,
    send:     <><path d="M22 2 11 13" /><path d="M22 2 15 22l-4-9-9-4Z" /></>,
    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" /></>,
    instagram:<><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17" cy="7" r="0.8" fill="currentColor" /></>,
    facebook: <><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8a1 1 0 0 1 1-1Z" /></>,
    google:   <><path d="M21 12a9 9 0 1 1-3-6.7" /><path d="M21 4v5h-5" /></>,
    chat:     <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" /></>,
    star:     <><path d="m12 3 2.9 6 6.6.5-5 4.5 1.5 6.5L12 17l-6 3.5L7.5 14 2.5 9.5 9.1 9Z" /></>,
    heart:    <><path d="M12 21s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9Z" /></>,
    eye:      <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" /></>,
    pause:    <><rect x="6" y="5" width="4" height="14" /><rect x="14" y="5" width="4" height="14" /></>,
    play:     <><path d="M6 4v16l14-8Z" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         style={{ flexShrink: 0 }}>
      {paths[name] || null}
    </svg>
  );
}

// Mini logo tile — matches the rest of the brand
function McLogoTile({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-label="MissionChef">
      <rect x="0" y="0" width="64" height="64" rx="12" fill="var(--mc-leaf)" />
      <g transform="translate(32 34)" fill="#FFFFFF">
        <circle cx="-10" cy="-6" r="9" />
        <circle cx="10"  cy="-6" r="9" />
        <circle cx="0"   cy="-13" r="10" />
        <circle cx="0"   cy="-3" r="6" />
        <rect x="-13" y="0" width="26" height="11" rx="2" />
      </g>
    </svg>
  );
}

function McWordmark({ size = 18, color = 'var(--mc-ink)', leaf = 'var(--mc-leaf-700)' }) {
  return (
    <span style={{
      fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: size,
      letterSpacing: '-0.025em', color, lineHeight: 1, whiteSpace: 'nowrap',
    }}>
      Mission<span style={{ color: leaf }}>Chef</span>
    </span>
  );
}

function StatusDot({ tone = 'ok', size = 8 }) {
  const color = { ok: 'var(--mc-ok)', warn: 'var(--mc-warn)', bad: 'var(--mc-bad)', info: 'var(--mc-info)', dim: 'var(--mc-ink-dim)' }[tone];
  return <span style={{ display: 'inline-block', width: size, height: size, background: color, borderRadius: '50%' }} />;
}

function Pill({ tone = 'default', children }) {
  const tones = {
    default: { bg: 'var(--mc-surface-2)', fg: 'var(--mc-ink-muted)', bd: 'var(--mc-rule)' },
    leaf:    { bg: 'color-mix(in oklab, var(--mc-leaf) 25%, var(--mc-surface))', fg: 'var(--mc-leaf-900)', bd: 'color-mix(in oklab, var(--mc-leaf) 60%, transparent)' },
    ember:   { bg: 'color-mix(in oklab, var(--mc-ember) 18%, var(--mc-surface))', fg: 'var(--mc-ember-700)', bd: 'color-mix(in oklab, var(--mc-ember) 40%, transparent)' },
    ink:     { bg: 'var(--mc-ink)', fg: 'var(--mc-bg)', bd: 'var(--mc-ink)' },
    warn:    { bg: 'color-mix(in oklab, var(--mc-ember) 18%, var(--mc-surface))', fg: 'var(--mc-ember-700)', bd: 'color-mix(in oklab, var(--mc-ember) 40%, transparent)' },
    bad:     { bg: 'color-mix(in oklab, var(--mc-bad) 15%, var(--mc-surface))', fg: 'var(--mc-bad)', bd: 'color-mix(in oklab, var(--mc-bad) 40%, transparent)' },
  }[tone] || { bg: 'var(--mc-surface-2)', fg: 'var(--mc-ink-muted)', bd: 'var(--mc-rule)' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 9px',
      fontSize: 11, letterSpacing: '0.04em',
      background: tones.bg, color: tones.fg, border: `1px solid ${tones.bd}`,
      fontFamily: "'JetBrains Mono', ui-monospace, monospace",
      textTransform: 'uppercase',
    }}>{children}</span>
  );
}

Object.assign(window, { MC, mcThemeCSS, fmtEUR, fmtINT, fmtPCT, fmtTIME, fmtDATE, fmtWEEKDAY, McIcon2, McLogoTile, McWordmark, StatusDot, Pill });