/* eCards Theme Tokens (Bootstrap-safe)
   - Do NOT override Bootstrap --bs-* variables.
   - Use these tokens from Figma with --ec-* prefix.
*/

:root {
  /* =========================
     Color tokens
     ========================= */
  --ec-color-brand-900: #1c3d6e; /* from Figma: Azul marino corporativo */
  --ec-color-brand-200: #d2e0e5; /* from Figma: Azul claro */
  --ec-color-white: #ffffff; /* from Figma: Blanco */

  --ec-color-danger-600: #d20000; /* from Figma: Rojo error */
  --ec-color-gray-200: #e5e5e5; /* from Figma: Gris claro */
  --ec-color-gray-300: #c7c7c7; /* from Figma: Gris medio */

  --ec-color-brand-700: #345991; /* from Figma: Propiedad 1=dark-blue-bg-loading (bg) */
  --ec-color-brand-400: #5e7dab; /* from Figma: Propiedad 1=white-bg-loading (text) */
  --ec-color-focus-ring: #00ddff; /* from Figma: focus border #0df */

  --ec-color-overlay-brand-45: rgba(28, 61, 110, 0.45); /* from Figma: overlay rgba(28,61,110,0.45) */
  --ec-color-shadow: rgba(0, 0, 0, 0.25); /* from Figma: shadow rgba(0,0,0,0.25) */

  /* =========================
     Typography tokens
     ========================= */
  --ec-font-family-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans",
    "Liberation Sans", sans-serif;

  --ec-font-weight-medium: 500; /* from Figma: * /Medium/* */
  --ec-font-weight-semibold: 600; /* from Figma: * /Semibold/* */
  --ec-font-weight-bold: 700; /* from Figma: Title/bold/48 */

  --ec-font-size-16: 16px; /* from Figma: Caption/Medium/16 */
  --ec-font-size-18: 18px; /* from Figma: Body/Medium/18 + Button/Medium/18 */
  --ec-font-size-20: 20px; /* from Figma: Subtitle/Medium/20 */
  --ec-font-size-22: 22px; /* from Figma: Subtitle/Semibold/22 */
  --ec-font-size-36: 36px; /* from Figma: Quote/Semibold Italic/36 */
  --ec-font-size-40: 40px; /* from Figma: Title/Semibold/40 */
  --ec-font-size-48: 48px; /* from Figma: Title/bold/48 */
  --ec-font-size-64: 64px; /* from Figma: numbers 01./02./03. */

  --ec-line-height-title-48: 55px; /* from Figma: Title/bold/48 (lineHeight: 55) */
  --ec-line-height-default: 1.35; /* TODO from Figma: confirm global line-height */
  --ec-letter-spacing-default: 0; /* from Figma: letterSpacing: 0 */

  /* =========================
     Radius tokens
     ========================= */
  --ec-radius-20: 20px; /* from Figma: cards/blocks rounded-[20px] */
  --ec-radius-pill: 35px; /* from Figma: button rounded-[35px] */

  /* =========================
     Shadow tokens
     ========================= */
  --ec-shadow-elev-1: 3px 8px 20px 0px var(--ec-color-shadow); /* from Figma: shadow-[3px_8px_20px_0px_rgba(0,0,0,0.25)] */

  /* =========================
     Spacing tokens
     ========================= */
  --ec-space-4: 4px; /* TODO from Figma: spacing scale */
  --ec-space-8: 8px; /* TODO from Figma: spacing scale */
  --ec-space-12: 12px; /* TODO from Figma: spacing scale */
  --ec-space-15: 15px; /* from Figma: button py-[15px] */
  --ec-space-16: 16px; /* from Figma: Caption/Medium/16 (commonly used spacing) */
  --ec-space-20: 20px; /* from Figma: section paddings (approx) */
  --ec-space-24: 24px; /* from Figma: button px-[24px] */
  --ec-space-32: 32px; /* TODO from Figma: spacing scale */
  --ec-space-48: 48px; /* TODO from Figma: spacing scale */
  --ec-space-64: 64px; /* TODO from Figma: spacing scale */

  /* =========================
     Layout tokens
     ========================= */
  --ec-header-height: 71px; /* from Figma: top bar h-[71px] */
  --ec-footer-height: 96px; /* from Figma: bottom bar h-[96px] */
  --ec-container-max: 1320px; /* TODO from Figma: frame width uses 1728; pick web-friendly max */
}

/* Base text defaults for theme usage (opt-in by adding .ec-theme) */
.ec-theme {
  font-family: var(--ec-font-family-sans);
  letter-spacing: var(--ec-letter-spacing-default);
  line-height: var(--ec-line-height-default);
  color: var(--ec-color-brand-900);
  background: var(--ec-color-white);
}