:root {
  /* Bantokens Brand Palette */
  --bt-blue-primary: #007DFF;
  --bt-blue-primary-hover: #0069DB;
  --bt-blue-primary-press: #0058B2;
  --bt-blue-secondary: #4DA5FF;
  --bt-blue-light: #4DA5FF;
  --bt-navy-deep: #0D2844;
  --bt-navy-deep-2: #0a2036;
  --bt-navy-black: #05060E;

  /* Mascota de Bantip — moneda dorada con filo pixelado */
  --bt-gold-light: #FFE089;
  --bt-gold: #FDBA02;
  --bt-gold-dark: #C49106;
  --bt-gold-deep: #A77B04;

  /* Neutrals */
  --bt-black: #000000;
  --bt-gray-900: #212529;
  --bt-gray-700: #495057;
  --bt-gray-500: #868e96;
  --bt-gray-300: #dee2e6;
  --bt-gray-100: #f4f6fb;
  --bt-white: #FFFFFF;

  /* Semantic Feedback */
  --bt-green-success: #16a34a;
  --bt-green-success-bg: #e7f8ee;
  --bt-whatsapp-green: #25D366;
  --bt-red-danger: #e0333f;
  --bt-red-danger-bg: #fdeaec;
  --bt-amber-warning: #f59e0b;
  --bt-amber-warning-bg: #fef3d9;

  /* Gradients */
  --bt-gradient-brand: linear-gradient(135deg, #4DA5FF 0%, #007DFF 100%);
  --bt-gradient-navy: linear-gradient(180deg, #0D2844 0%, #0a2036 100%);

  /* Typography */
  /* Segoe UI vía Adobe Fonts (kit uhv0ghs); solo pesos 400 y 700. Ver src/shared/brand-font.ts. */
  --bt-font-sans: 'segoe-ui', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --bt-font-mono: 'Roboto Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, ui-monospace, monospace;

  /* Radii & Shadows */
  --bt-radius-s: 6px;
  --bt-radius-m: 10px;
  --bt-radius-l: 16px;
  --bt-radius-pill: 9999px;
  --bt-shadow-card: 0 1px 3px rgba(13, 40, 68, 0.08), 0 4px 12px rgba(13, 40, 68, 0.05);
  --bt-shadow-float: 0 8px 24px rgba(13, 40, 68, 0.12), 0 2px 6px rgba(13, 40, 68, 0.06);

  /* Semantic Design Tokens (Default / Light Mode) */
  --bt-bg-canvas: #F4F6FB;
  --bt-bg-surface: #FFFFFF;
  --bt-bg-surface-alt: #FFFFFF;
  --bt-bg-header: #00356F;
  --bt-border: #E2E8F0;
  --bt-text-primary: #212529;
  --bt-text-secondary: #495057;
  --bt-text-muted: #868E96;
  --bt-brand-primary: #007DFF;
  --bt-brand-secondary: #4DA5FF;
  --bt-brand-navy: #00356F;
  --bt-brand-tint: #E5F1FF;
  --bt-token-amber: #FDBA02;
  --bt-font-ui: 'Segoe UI', system-ui, sans-serif;

  /* Aliases for backwards compatibility */
  --bt-bg: #F4F6FB;
  --bt-surface: #FFFFFF;
  --bt-surface-2: #FFFFFF;
  --bt-surface-card: #FFFFFF;
  --bt-header-bg: #00356F;
  --bt-header-border: rgba(13, 40, 68, 0.15);
  --bt-text: #212529;
  --bt-cta-bg: linear-gradient(135deg, #4DA5FF, #007DFF);
  --bt-active-state: #E5F1FF;
  --bt-active-border: #007DFF;
}

/* Light Theme */
:root[data-theme="light"],
[data-theme="light"] {
  --bt-bg-canvas: #F4F6FB;
  --bt-bg-surface: #FFFFFF;
  --bt-bg-surface-alt: #FFFFFF;
  --bt-bg-header: #00356F;
  --bt-border: #E2E8F0;
  --bt-text-primary: #212529;
  --bt-text-secondary: #495057;
  --bt-text-muted: #868E96;
  --bt-brand-primary: #007DFF;
  --bt-brand-secondary: #4DA5FF;
  --bt-brand-navy: #00356F;
  --bt-brand-tint: #E5F1FF;
  --bt-token-amber: #FDBA02;

  --bt-bg: #F4F6FB;
  --bt-surface: #FFFFFF;
  --bt-surface-2: #FFFFFF;
  --bt-surface-card: #FFFFFF;
  --bt-header-bg: #00356F;
  --bt-header-border: rgba(13, 40, 68, 0.15);
  --bt-text: #212529;
  --bt-cta-bg: linear-gradient(135deg, #4DA5FF, #007DFF);
  --bt-active-state: #E5F1FF;
  --bt-active-border: #007DFF;
}

/* Dark Theme (Deep Navy Scale) */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bt-bg-canvas: #080E18;
  --bt-bg-surface: #0E1726;
  --bt-bg-surface-alt: #162338;
  --bt-bg-header: #101D31;
  --bt-border: #223654;
  --bt-text-primary: #F4F6FB;
  --bt-text-secondary: #94A3B8;
  --bt-text-muted: #64748B;
  --bt-brand-primary: #007DFF;
  --bt-brand-secondary: #4DA5FF;
  --bt-brand-navy: #00356F;
  --bt-brand-tint: #1D3557;
  --bt-token-amber: #FDBA02;

  --bt-bg: #080E18;
  --bt-surface: #0E1726;
  --bt-surface-2: #162338;
  --bt-surface-card: #162338;
  --bt-header-bg: #101D31;
  --bt-header-border: #007DFF;
  --bt-text: #F4F6FB;
  --bt-cta-bg: #007DFF;
  --bt-active-state: #1D3557;
  --bt-active-border: #007DFF;
}
