// Meridian design tokens — Direction A · Clinical White
window.MERIDIAN = {
  paper: '#fbfaf7',
  paperDim: '#f3efe8',
  paperWarm: '#f7f3ea',
  ink: '#14120f',
  text: '#2a2723',
  muted: '#6b655c',
  mutedDim: '#a8a299',
  rule: '#e2ddd2',
  ruleSoft: '#ece8df',
  accent: '#8a1f2b',
  accentSoft: 'rgba(138,31,43,0.08)',
  accentHover: '#6f1822',
  darkBg: '#141210',
  darkSurface: '#1c1a17',
  darkRule: '#2a2623',
  darkText: '#ebe6dd',
  darkMuted: '#8a8378',
  success: '#3f7a4f',
  warning: '#b27100',
  error: '#a33030',
  info: '#2a5b8f',
  serif: '"Source Serif 4", "Source Serif Pro", Georgia, serif',
  sans: '"Inter", -apple-system, system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// Shared atoms
window.ArcMark = function ArcMark({ size = 40, color, accent, strokeWidth = 1.5 }) {
  const M = window.MERIDIAN;
  const c = color || M.ink;
  const a = accent || M.accent;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ flexShrink: 0, display: 'block' }}>
      <circle cx="50" cy="50" r="44" fill="none" stroke={c} strokeWidth={strokeWidth} />
      <line x1="50" y1="6" x2="50" y2="94" stroke={c} strokeWidth={strokeWidth} />
      <ellipse cx="50" cy="50" rx="22" ry="44" fill="none" stroke={c} strokeWidth={strokeWidth} />
      <circle cx="50" cy="50" r="2.8" fill={a} />
    </svg>
  );
};

window.Wordmark = function Wordmark({ size = 24, withMark = true, color, inverse = false }) {
  const M = window.MERIDIAN;
  const c = color || (inverse ? M.darkText : M.ink);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.4, color: c, fontFamily: M.serif, fontSize: size, letterSpacing: '-0.02em', lineHeight: 1, fontWeight: 400 }}>
      {withMark && <ArcMark size={size * 1.05} color={c} accent={M.accent} strokeWidth={1.4} />}
      <span>Meridian</span>
    </div>
  );
};

// Small caps mono label
window.Eyebrow = function Eyebrow({ children, color, style }) {
  const M = window.MERIDIAN;
  return (
    <span style={{
      fontFamily: M.mono,
      fontSize: 10,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: color || M.muted,
      ...style,
    }}>{children}</span>
  );
};

// Badge with border — evidence grade
window.RuleBadge = function RuleBadge({ children, color, style }) {
  const M = window.MERIDIAN;
  const c = color || M.accent;
  return (
    <span style={{
      fontFamily: M.mono,
      fontSize: 9.5,
      letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color: c,
      border: `1px solid ${c}`,
      padding: '3px 7px',
      display: 'inline-block',
      whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
};

// Button
window.MButton = function MButton({ children, variant = 'primary', size = 'md', as = 'button', href, onClick, style, arrow = true }) {
  const M = window.MERIDIAN;
  const padY = size === 'lg' ? 16 : 12;
  const padX = size === 'lg' ? 28 : 20;
  const fontSize = size === 'lg' ? 15 : 13;
  const base = {
    fontFamily: M.sans, fontWeight: 500, fontSize,
    padding: `${padY}px ${padX}px`,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    cursor: 'pointer', border: '1px solid transparent',
    textDecoration: 'none', letterSpacing: '-0.005em',
    transition: 'all 120ms ease',
  };
  const variants = {
    primary: { background: M.accent, color: M.paper, borderColor: M.accent },
    secondary: { background: 'transparent', color: M.ink, borderColor: M.ink },
    ghost: { background: 'transparent', color: M.ink, borderColor: M.rule },
  };
  const Tag = as;
  const props = { onClick, href, style: { ...base, ...variants[variant], ...style } };
  return (
    <Tag {...props}>
      <span>{children}</span>
      {arrow && <span style={{ display: 'inline-block', transform: 'translateY(-1px)' }}>→</span>}
    </Tag>
  );
};