// anTee-Up landing page — shared tokens & primitives.
// EDITORIAL DARK palette — mirrors the app's home screen:
// black-green bg, champagne gold accents, Playfair Display italic on the
// accent words. DM Sans for body. Cards are translucent on dark.

window.A = {
  // ── Surfaces ───────────────────────────────────────────────────
  bgDarkest: '#091910',     // primary page background (forest-black)
  bgDark:    '#0E2219',     // alt section band
  bgPrimary: '#091910',     // alias — same as bgDarkest
  bgMid:     '#1B3A2D',     // raised surface (forest green)
  bgLight:   '#27AE60',     // legacy alias (used by some old internal mocks)

  // ── Brand / accent ─────────────────────────────────────────────
  brand:     '#C9A84C',     // champagne gold — primary accent
  brandDeep: '#1B3A2D',     // deep forest — surface tone
  orange:    '#C9A84C',     // legacy alias of brand
  orangeLight: '#E2C77A',
  orangeDeep:  '#8E7430',

  // gold/champagne aliases (used by the sections-bottom file)
  gold:        '#C9A84C',
  goldLight:   '#E2C77A',
  goldDark:    '#8E7430',

  // ── Text ───────────────────────────────────────────────────────
  textPri:   '#F4F0E1',                // off-white (cream)
  textSec:   'rgba(244,240,225,0.62)', // body
  textMuted: 'rgba(244,240,225,0.42)', // captions

  // ── Cards & borders ────────────────────────────────────────────
  cardBg:         'rgba(255,255,255,0.025)',
  cardBgRaised:   'rgba(255,255,255,0.04)',
  cardBorder:     'rgba(201,168,76,0.14)',
  cardBorderHover:'rgba(201,168,76,0.38)',
  divider:        'rgba(201,168,76,0.18)',

  // ── Type stacks ────────────────────────────────────────────────
  display:   "'Playfair Display', 'Times New Roman', Georgia, serif",
  body:      "'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",

  // ── App-internal palette (kept for the phone-screen mocks) ─────
  app: {
    bg:        '#091910',
    surface:   '#0E2219',
    primary:   '#C9A84C',
    primaryDeep: '#8E7430',
    accent:    '#C9A84C',
    secondary: '#27AE60',
    secondaryDeep: '#1F7A4A',
    loss:      '#C0392B',
    fg:        '#F4F0E1',
    fg2:       'rgba(244,240,225,0.72)',
    fg3:       'rgba(244,240,225,0.45)',
    outline:   'rgba(201,168,76,0.18)',
    highlight: 'rgba(201,168,76,0.10)',
  },
};

// Lucide-style SVG icon — 1.75px stroke matches the marketing site convention.
window.Svg = function Svg({ children, w = 22, sw = 1.75 }) {
  return (
    <svg width={w} height={w} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{children}</svg>
  );
};

window.AIcons = {
  flag:     () => <Svg><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></Svg>,
  activity: () => <Svg><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></Svg>,
  wallet:   () => <Svg><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></Svg>,
  shield:   () => <Svg><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></Svg>,
  users:    () => <Svg><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></Svg>,
  clock:    () => <Svg><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></Svg>,
  chevDown: () => <Svg w={18}><polyline points="6 9 12 15 18 9"/></Svg>,
  check:    () => <Svg w={16}><polyline points="20 6 9 17 4 12"/></Svg>,
  arrow:    () => <Svg w={16}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></Svg>,
  star:     () => <Svg w={16}><polygon points="12 2 15 8 22 9 17 14 18 21 12 17.5 6 21 7 14 2 9 9 8 12 2" fill="currentColor"/></Svg>,
};