/* =====================================================
   tokens.css — Sistema de diseño Sube IA Tech
   Basado en design.md §24–30
   ===================================================== */

:root {
  /* --------------------------------------------------
     Color: Fondos
  -------------------------------------------------- */
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-subtle: #f0f4fa;
  --surface-raised: #ffffff;

  /* --------------------------------------------------
     Color: Texto
  -------------------------------------------------- */
  --text: #0b1220;
  --text-secondary: #4f5d73;
  --text-tertiary: #748198;
  --text-inverse: #ffffff;

  /* --------------------------------------------------
     Color: Bordes
  -------------------------------------------------- */
  --border: #dde5f0;
  --border-strong: #c6d2e1;

  /* --------------------------------------------------
     Color: Brand (azul)
  -------------------------------------------------- */
  --brand-950: #071b33;
  --brand-900: #0a274b;
  --brand-800: #0c3570;
  --brand-700: #0e4fa8;
  --brand-600: #1463e6;
  --brand-500: #2d7ff9;
  --brand-400: #5b9eff;
  --brand-300: #93bfff;
  --brand-100: #eaf2ff;
  --brand-50: #f5f9ff;

  /* --------------------------------------------------
     Color: Acento (teal/verde)
  -------------------------------------------------- */
  --accent-700: #087f73;
  --accent-500: #14b8a6;
  --accent-300: #5eead4;
  --accent-100: #dff8f3;
  --accent-50: #f0fdfa;

  /* --------------------------------------------------
     Color: Logo / Brand mark (rojo Sube IA)
  -------------------------------------------------- */
  --logo-red: #c23b2b;

  /* --------------------------------------------------
     Color: Estados
  -------------------------------------------------- */
  --success: #16803a;
  --success-bg: #f0fdf4;
  --warning: #b76000;
  --warning-bg: #fffbeb;
  --danger: #c92a2a;
  --danger-bg: #fff5f5;

  /* --------------------------------------------------
     Color: Foco
  -------------------------------------------------- */
  --focus: #1463e6;
  --focus-ring: 0 0 0 3px rgba(20, 99, 230, 0.35);

  /* --------------------------------------------------
     Tipografía: Familias
  -------------------------------------------------- */
  --font-display: "Manrope", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-body:
    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* --------------------------------------------------
     Tipografía: Escala desktop (design.md §26)
  -------------------------------------------------- */
  --text-display: clamp(48px, 5vw, 64px);
  --text-h1: clamp(36px, 4.5vw, 52px);
  --text-h2: clamp(28px, 3.5vw, 40px);
  --text-h3: clamp(22px, 2.5vw, 28px);
  --text-h4: clamp(18px, 2vw, 22px);
  --text-lead: clamp(17px, 1.8vw, 20px);
  --text-body-lg: clamp(16px, 1.5vw, 18px);
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 12px;
  --text-tiny: 11px;

  /* --------------------------------------------------
     Tipografía: Pesos
  -------------------------------------------------- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* --------------------------------------------------
     Tipografía: Line heights
  -------------------------------------------------- */
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-body: 1.7;

  /* --------------------------------------------------
     Espaciado: Escala 4px (design.md §28)
  -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* --------------------------------------------------
     Layout
  -------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 800px;
  --gutter: 24px;
  --section-v: var(--space-24);

  /* --------------------------------------------------
     Bordes y radios (design.md §29)
  -------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --------------------------------------------------
     Sombras
  -------------------------------------------------- */
  --shadow-xs: 0 1px 3px rgba(8, 24, 48, 0.08);
  --shadow-sm: 0 4px 12px rgba(8, 24, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(8, 24, 48, 0.1);
  --shadow-lg: 0 12px 40px rgba(8, 24, 48, 0.12);
  --shadow-xl: 0 20px 60px rgba(8, 24, 48, 0.15);
  --shadow-card:
    0 2px 8px rgba(8, 24, 48, 0.06), 0 8px 24px rgba(8, 24, 48, 0.08);

  /* --------------------------------------------------
     Transiciones (design.md §34)
  -------------------------------------------------- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 140ms;
  --duration-base: 180ms;
  --duration-card: 220ms;
  --duration-section: 320ms;

  /* --------------------------------------------------
     Navbar
  -------------------------------------------------- */
  --navbar-height: 72px;
  --navbar-height-sm: 60px;

  /* --------------------------------------------------
     Z-index
  -------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* --------------------------------------------------
     Gradientes (design.md §25)
  -------------------------------------------------- */
  --gradient-hero:
    radial-gradient(
      circle at 20% 20%,
      rgba(45, 127, 249, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 40%,
      rgba(20, 184, 166, 0.14),
      transparent 30%
    ),
    #071b33;

  --gradient-hero-subtle:
    radial-gradient(
      circle at 10% 50%,
      rgba(45, 127, 249, 0.12),
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(20, 184, 166, 0.1),
      transparent 30%
    ),
    #0a274b;

  --gradient-brand: linear-gradient(135deg, var(--brand-600), var(--brand-500));

  --gradient-card-hover: linear-gradient(
    145deg,
    rgba(45, 127, 249, 0.04),
    transparent
  );
}

/* --------------------------------------------------
   Responsive overrides
-------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --section-v: var(--space-16);
    --navbar-height: var(--navbar-height-sm);
  }
}