// Kayser v2 "Glass" — design tokens + utility helpers.
// Aesthetic: Raycast on phone. Translucent glass over a quiet purple gradient.
// Single accent color, mono-ish numerals, fine borders, subtle vibrancy.

const KX2 = {
  // Type stacks
  fontUI:    "system-ui, -apple-system, 'Segoe UI', sans-serif",
  fontBrand: "'Inter Tight', system-ui, sans-serif",
  fontMono:  "ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace",

  // Brand
  brand:     '#7c3aed',          // Kayser purple
  brandSoft: 'rgba(124, 58, 237, .14)',
  brandDeep: '#5b21b6',

  // Surface tokens — used over the wallpaper gradient
  glass:        'rgba(20, 14, 38, .55)',     // dark glass card
  glassHi:      'rgba(255, 255, 255, .08)',  // glass highlight overlay
  glassLine:    'rgba(255, 255, 255, .10)',  // glass border
  glassSheet:   'rgba(18, 12, 32, .82)',     // sheet/modal backing
  glassInput:   'rgba(255, 255, 255, .07)',

  // Text on glass
  ink:    'rgba(255, 255, 255, .96)',
  ink2:   'rgba(255, 255, 255, .72)',
  ink3:   'rgba(255, 255, 255, .50)',
  inkDim: 'rgba(255, 255, 255, .32)',

  // Action colors (de-saturated, sit nicely on glass)
  approve: '#34d399',
  edit:    '#60a5fa',
  reject:  '#fb7185',
  warn:    '#fbbf24',

  // Chip backgrounds (translucent)
  chipBg:  'rgba(255, 255, 255, .08)',
  chipBgActive: 'rgba(255, 255, 255, .16)',
};

// Wallpaper gradient — deep, calm, low-saturation. Cards do the talking.
const KX2_WALLPAPER = `
  radial-gradient(ellipse 90% 70% at 15% 0%,  rgba(76, 29, 149, .35) 0%, transparent 55%),
  radial-gradient(ellipse 80% 60% at 100% 25%, rgba(91, 33, 182, .28) 0%, transparent 55%),
  radial-gradient(ellipse 100% 70% at 50% 100%, rgba(30, 27, 75, .55) 0%, transparent 60%),
  linear-gradient(180deg, #0d0820 0%, #060311 100%)
`;

// Glass card style (apply to any container)
const kx2Glass = (extra = {}) => ({
  background: KX2.glass,
  backdropFilter: 'blur(28px) saturate(140%)',
  WebkitBackdropFilter: 'blur(28px) saturate(140%)',
  border: `1px solid ${KX2.glassLine}`,
  borderRadius: 16,
  ...extra,
});

const kx2GlassThin = (extra = {}) => ({
  background: KX2.glassInput,
  backdropFilter: 'blur(20px) saturate(140%)',
  WebkitBackdropFilter: 'blur(20px) saturate(140%)',
  border: `1px solid ${KX2.glassLine}`,
  borderRadius: 12,
  ...extra,
});

// Format helpers (re-exported so v2 doesn't reach into v1 globals if those move)
const kx2FmtCurrency = (n) => n == null ? null : '$' + Number(n).toLocaleString('en-US');

Object.assign(window, { KX2, KX2_WALLPAPER, kx2Glass, kx2GlassThin, kx2FmtCurrency });