// Design tokens for Batyr Joly
const T = {
  // Base palette
  ink:      '#0A0A0C',      // deepest charcoal — app background
  ink2:     '#121216',      // elevated charcoal — cards
  ink3:     '#1C1C22',      // raised surfaces
  ink4:     '#2A2A33',      // dividers / inactive
  ash:      '#55555F',      // muted text
  cream:    '#EDE4D3',      // primary text (warm white)
  cream2:   '#C8BFAE',      // secondary text
  gold:     '#D9A441',      // molten gold — primary accent
  goldHot:  '#F2C35A',      // hot gold glow
  goldDeep: '#8B6318',      // deep gold for bg washes
  amber:    '#C46A1A',      // warm amber — secondary accent
  ember:    '#6B3410',      // deep ember (program: Batyr Pro)
  blood:    '#5A1A0E',      // mentorship red-brown
  leaf:     '#7A8A4A',      // dusty olive (nutrition)
  sky:      '#6A7D8C',      // slate blue (meditation)

  // Radii
  r_sm: 12,
  r_md: 18,
  r_lg: 24,
  r_xl: 32,

  // Fonts
  display: '"Oswald", "Helvetica Neue", system-ui, sans-serif',
  body:    '"Inter", -apple-system, system-ui, sans-serif',
  mono:    '"JetBrains Mono", ui-monospace, monospace',
};

// Haptic feedback helper — subtle vibration on tap
const haptic = () => {
  if (navigator.vibrate) navigator.vibrate(8);
};

// Gold gradient string helper
const goldGrad = `linear-gradient(135deg, ${T.goldHot} 0%, ${T.gold} 50%, ${T.amber} 100%)`;
const goldGradV = `linear-gradient(180deg, ${T.goldHot} 0%, ${T.gold} 100%)`;

// SVG motif — tiny mountain peaks icon
const MountainIcon = ({ size = 16, color = '#D9A441' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M2 20 L9 8 L13 14 L17 6 L22 20 Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
  </svg>
);

const FlameIcon = ({ size = 16, color = '#F2C35A' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M12 2c2 4 6 6 6 11 0 4-3 7-6 7s-6-3-6-7c0-3 2-4 2-7 1 2 3 3 4 0z"/>
  </svg>
);

const EagleIcon = ({ size = 20, color = '#D9A441' }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <path d="M2 16 L10 12 L14 14 L16 10 L18 14 L22 12 L30 16 L22 18 L18 20 L16 24 L14 20 L10 18 Z"
      stroke={color} strokeWidth="1.5" strokeLinejoin="round" fill="none"/>
    <circle cx="16" cy="16" r="1.5" fill={color}/>
  </svg>
);

// Topographic lines — subtle bg pattern
const TopoLines = ({ opacity = 0.06, color = '#D9A441' }) => (
  <svg width="100%" height="100%" viewBox="0 0 400 400" preserveAspectRatio="none"
    style={{ position: 'absolute', inset: 0, opacity, pointerEvents: 'none' }}>
    <defs>
      <pattern id="topo" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
        <path d="M-50 100 Q 100 40, 200 100 T 450 100" stroke={color} strokeWidth="0.8" fill="none"/>
        <path d="M-50 140 Q 120 80, 220 140 T 450 140" stroke={color} strokeWidth="0.8" fill="none"/>
        <path d="M-50 180 Q 80 120, 180 180 T 450 180" stroke={color} strokeWidth="0.8" fill="none"/>
        <path d="M-50 220 Q 150 160, 250 220 T 450 220" stroke={color} strokeWidth="0.8" fill="none"/>
        <path d="M-50 260 Q 100 200, 200 260 T 450 260" stroke={color} strokeWidth="0.8" fill="none"/>
        <path d="M-50 300 Q 130 240, 230 300 T 450 300" stroke={color} strokeWidth="0.8" fill="none"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#topo)"/>
  </svg>
);

Object.assign(window, { T, haptic, goldGrad, goldGradV, MountainIcon, FlameIcon, EagleIcon, TopoLines });