// hush-tokens.jsx — design tokens + tiny decorative glyphs for the marketing site.
// Self-contained (no deps). Exposes W (color), T (type), softShadow, Star, Moon to window.

const W = {
  // Canvas
  cream:    '#FBF5EA',
  cream2:   '#F5EAD6',
  card:     '#FFFFFF',
  cardTint: '#FFFCF5',

  // Friendly accents
  sage:      '#7CA989',
  sageSoft:  '#D8E5DA',
  sageMist:  '#EBF1EA',
  peach:     '#F0A87E',
  peachSoft: '#FBD9C2',
  peachMist: '#FDEADD',
  lavender:  '#B8A8D4',
  lavSoft:   '#E6DFF0',
  lavMist:   '#F0EBF6',
  butter:    '#EBC066',
  butterSoft:'#F8E0A6',
  sky:       '#88B5D5',
  skySoft:   '#D5E5F0',
  coral:     '#EA8F75',
  coralSoft: '#F8CCBE',

  // Text
  ink:       '#2B2620',
  inkSoft:   '#5C5247',
  inkMute:   '#8B7F73',
  inkFaint:  '#B5A89A',

  shadow:    'rgba(72,52,28,0.10)',
  shadowSoft:'rgba(72,52,28,0.05)',
};

const T = {
  d1:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 44, letterSpacing: '-0.035em', lineHeight: 1.05 },
  d2:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 32, letterSpacing: '-0.03em',  lineHeight: 1.1  },
  d3:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 24, letterSpacing: '-0.02em',  lineHeight: 1.2  },
  d4:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 19, letterSpacing: '-0.01em',  lineHeight: 1.25 },
  d5:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 16, letterSpacing: '-0.005em', lineHeight: 1.3  },
  bL:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 500, fontSize: 16, lineHeight: 1.45 },
  bM:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 500, fontSize: 14, lineHeight: 1.5 },
  bS:  { fontFamily: 'Plus Jakarta Sans', fontWeight: 500, fontSize: 12, lineHeight: 1.45 },
  lbl: { fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: 12, letterSpacing: '0.04em' },
};

const softShadow = (lift = 1) => {
  const o = lift;
  return `0 ${2*o}px ${4*o}px rgba(72,52,28,0.04), 0 ${8*o}px ${20*o}px ${-4*o}px rgba(72,52,28,0.10), 0 1px 0 rgba(255,255,255,0.9) inset`;
};

// Twinkling star accent
function Star({ size = 10, color = W.butter, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
      <path d="M12 2 L14 9 L21 12 L14 15 L12 22 L10 15 L3 12 L10 9 Z" fill={color} />
    </svg>
  );
}

// Soft moon accent
function Moon({ size = 28, color = W.lavender, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
      <path d="M19 14.5 A 8 8 0 0 1 9.5 5 8 8 0 1 0 19 14.5 Z" fill={color} />
    </svg>
  );
}

Object.assign(window, { W, T, softShadow, Star, Moon });