// tokens.jsx — shared design tokens + tiny icons for Calm Signal

const CS = {
  // Parent (warm-cool clinical)
  parentBg: '#FAFAF7',
  parentInk: '#1A1F2E',
  parentMuted: '#6B7280',
  parentLine: 'rgba(26,31,46,0.08)',
  parentCard: '#FFFFFF',
  parentSage: '#C9DDC4',
  parentSageInk: '#2C3E2D',
  parentAmber: '#F4B860',
  parentAmberSoft: '#FCEFD6',
  parentRose: '#E08A7B',
  parentRoseSoft: '#F8DDD7',
  parentCalm: '#7FA98F',
  // Child (warm peach/coral/sun)
  childCream: '#FFF4E6',
  childPeach: '#FFB37A',
  childCoral: '#FF8FA3',
  childSun: '#FFD66E',
  childTeal: '#7EE0D8',
  childInk: '#3D2914',
  childMuted: '#8A6F58',
};

const FONT_DISPLAY = '"Fraunces", "Charter", Georgia, serif';
const FONT_BODY = '-apple-system, "SF Pro Text", system-ui, sans-serif';
const FONT_CHILD = '"Nunito", "SF Pro Rounded", -apple-system, system-ui, sans-serif';

// HRV sparkline
function Spark({ data, w = 200, h = 36, stroke = '#7FA98F', fill = 'rgba(127,169,143,0.18)' }) {
  const max = Math.max(...data), min = Math.min(...data);
  const r = max - min || 1;
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - 4 - ((v - min) / r) * (h - 8),
  ]);
  const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ');
  const fillD = d + ` L${w},${h} L0,${h} Z`;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
      <path d={fillD} fill={fill} />
      <path d={d} stroke={stroke} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Tiny heart pulse line
function Heartline({ color = '#1A1F2E', w = 80, h = 18 }) {
  return (
    <svg width={w} height={h} viewBox="0 0 80 18">
      <path d="M0 9 L18 9 L22 4 L26 14 L30 9 L48 9 L52 2 L56 16 L60 9 L80 9"
        stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, { CS, FONT_DISPLAY, FONT_BODY, FONT_CHILD, Spark, Heartline });