/* ==========================================================================
   Omega DST — Design Tokens
   Sistema de tokens adaptado a la identidad de marca (logo Omega DST).
   Metodología de escalas basada en un sistema editorial de espaciado 4px.
   ========================================================================== */

:root {
  /* ---- Color: marca ---- */
  --color-primary: #3F64E1;          /* Azul primario: CTAs, links, focus, estados activos */
  --color-primary-hover: #3352C4;    /* Azul primario, hover/active */
  --color-primary-tint: #EEF1FD;     /* Fondo tenue para bloques resaltados con azul */
  --color-navy: #294295;             /* Azul marino de marca: headings, footer, énfasis fuerte */
  --color-navy-deep: #1B2A66;        /* Azul marino profundo: fondos oscuros (footer, CTA final) */
  --color-secondary: #0EB4AD;        /* Turquesa de marca: decorativo, iconos, badges (NO texto) */
  --color-secondary-text: #0B7F79;   /* Turquesa oscurecido, seguro para texto (AA) */
  --color-accent-mint: #01C99A;      /* Menta de marca: acentos puntuales, subrayados, gradientes */

  /* ---- Color: neutros ---- */
  --color-background: #FAFAFB;       /* Fondo general de página */
  --color-surface: #FFFFFF;          /* Tarjetas, paneles, nav */
  --color-surface-alt: #F3F4F8;      /* Superficie alterna (secciones zebra) */
  --color-border: #E7E8F0;           /* Bordes de tarjetas, inputs, divisores */
  --color-border-strong: #D3D5E2;    /* Bordes con mayor énfasis */

  --color-text-primary: #15172B;     /* Texto principal (casi negro, nunca #000) */
  --color-text-secondary: #555871;   /* Texto secundario, descripciones, metadatos */
  --color-text-muted: #85889C;       /* Placeholders, timestamps, texto deshabilitado */
  --color-text-on-dark: #FFFFFF;     /* Texto sobre fondos oscuros/navy */
  --color-text-on-dark-muted: #B7C0EA;

  /* ---- Color: estado ---- */
  --color-success: #10B981;
  --color-success-tint: #E7F8F1;
  --color-warning: #F59E0B;
  --color-warning-tint: #FEF3E2;
  --color-error: #EF4444;
  --color-error-tint: #FDECEC;

  /* ---- Color: enfoque / accesibilidad ---- */
  --focus-ring: 0 0 0 3px rgba(63, 100, 225, 0.28);
  --focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.45);

  /* ---- Tipografía ---- */
  --font-display: 'General Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);   /* ~40 -> 72px */
  --fs-headline: clamp(2.1rem, 1.7rem + 1.8vw, 3.75rem);  /* ~34 -> 60px */
  --fs-h2: clamp(1.6rem, 1.4rem + 0.9vw, 2rem);           /* ~26 -> 32px */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* ~20 -> 24px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-body: 0.9375rem;     /* 15px */
  --fs-small: 0.8125rem;    /* 13px */
  --fs-caption: 0.75rem;    /* 12px */
  --fs-overline: 0.6875rem; /* 11px */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --tracking-tight: -0.03em;
  --tracking-tighter: -0.04em;
  --tracking-wide: 0.06em;

  /* ---- Espaciado (base 4px) ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  --section-space: var(--space-8);       /* mobile */
  --container-max: 1280px;
  --container-padding: var(--space-6);

  /* ---- Radios ---- */
  --radius-xs: 4px;   /* chips, badges, código inline */
  --radius-sm: 6px;   /* botones, inputs, selects */
  --radius-md: 8px;   /* paneles, dropdowns */
  --radius-lg: 12px;  /* tarjetas, secciones destacadas */
  --radius-full: 9999px; /* avatares, pills, botones redondeados */

  /* ---- Elevación ---- */
  --shadow-card-hover: 0 8px 30px rgba(21, 23, 43, 0.08);
  --shadow-button-hover: 0 4px 14px rgba(63, 100, 225, 0.35);
  --shadow-dropdown: 0 12px 40px rgba(21, 23, 43, 0.14);

  /* ---- Transiciones ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
}

@media (min-width: 768px) {
  :root {
    --section-space: var(--space-12);
    --container-padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-space: var(--space-16);
  }
}