/**
 * D3RO Voice Landing Page - Centralized Design Tokens
 *
 * All visual constants live here. Components reference these tokens
 * instead of hardcoding colors, spacing, or typography values.
 *
 * Tailwind classes map to these same values via tailwind.config.js.
 * Use tokens when building inline styles or JS-driven visuals.
 */

// ── Colors ──────────────────────────────────────────────
export const color = {
  brand: {
    amber: '#f25b29',
    amberLight: '#ff7a4d',
    amberDark: '#c44a22',
    amberGlow: 'rgba(242,91,41,0.6)',
    amberDim: 'rgba(242,91,41,0.15)',
    amberMuted: 'rgba(242,91,41,0.08)',
  },
  surface: {
    950: '#0a0a0c',
    900: '#0d0d0f',
    800: '#131315',
    700: '#19191b',
    600: '#1e1f21',
    500: '#242427',
    400: '#2a2a2d',
    300: '#333338',
    200: '#3a3b3f',
    100: '#4a4b50',
  },
  neutral: {
    50: '#fafafa',
    100: '#f0f0f1',
    200: '#d4d4d8',
    300: '#a1a1aa',
    400: '#71717a',
    500: '#52525b',
  },
  semantic: {
    success: '#22c55e',
    warning: '#eab308',
    error: '#ef4444',
  },
} as const

// ── Typography ──────────────────────────────────────────
export const font = {
  display: '"Space Grotesk", sans-serif',
  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  mono: '"JetBrains Mono", "Fira Code", monospace',
} as const

// ── Spacing (px) ────────────────────────────────────────
export const space = {
  section: { y: 120, yMobile: 80 },
  grid: { gap: 16, gapLg: 24 },
  container: { maxWidth: 1280, px: 24, pxLg: 48 },
} as const

// ── Shadows ─────────────────────────────────────────────
export const shadow = {
  insetPanel: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
  chassis: '0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)',
  glowSm: '0 0 10px rgba(242,91,41,0.3)',
  glowMd: '0 0 20px rgba(242,91,41,0.25), 0 0 40px rgba(242,91,41,0.1)',
  glowLg: '0 0 30px rgba(242,91,41,0.3), 0 0 60px rgba(242,91,41,0.15), 0 0 90px rgba(242,91,41,0.05)',
} as const

// ── Radii ───────────────────────────────────────────────
export const radius = {
  instrument: '2px',
  panel: '6px',
  card: '12px',
  pill: '999px',
} as const

// ── Z-Index ─────────────────────────────────────────────
export const zIndex = {
  header: 50,
  overlay: 40,
  modal: 60,
} as const

// ── Timing ──────────────────────────────────────────────
export const timing = {
  fast: '150ms',
  normal: '250ms',
  slow: '400ms',
  easeOut: 'cubic-bezier(0.16, 1, 0.3, 1)',
} as const

// ── Feature Labels ──────────────────────────────────────
export const tierLabel = {
  free: 'FREE',
  pro: 'PRO',
  proPlus: 'PRO+',
} as const

// ── Nav Items ───────────────────────────────────────────
// Labels come from i18n (t.nav.*). Only hrefs and keys are defined here.
export const navItems = [
  { key: 'features' as const, href: '#features' },
  { key: 'pipeline' as const, href: '#pipeline' },
  { key: 'privacy' as const, href: '#privacy' },
  { key: 'pricing' as const, href: '#pricing' },
  { key: 'faq' as const, href: '#faq' },
] as const