/* ============================================================
   THM — Design Tokens
   Sistema de variables CSS centralizado.
   Nunca hardcodees valores — usa siempre estas variables.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     PALETA DE COLOR
     ---------------------------------------------------------- */
  --color-bg:           #0a0a14;
  --color-bg-elevated:  #0f0f1e;
  --color-bg-card:      #12121f;
  --color-surface:      rgba(255, 255, 255, 0.04);
  --color-surface-hover:rgba(255, 255, 255, 0.07);
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);

  /* Accentos */
  --color-accent-1:     #4f46e5;   /* Indigo eléctrico */
  --color-accent-2:     #06b6d4;   /* Cian */
  --color-accent-grad:  linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  --color-accent-grad-r:linear-gradient(135deg, #06b6d4 0%, #4f46e5 100%);

  /* Texto */
  --color-text-primary: #f0f0ff;
  --color-text-secondary:#c4c4d4;
  --color-text-muted:   #8b8baa;
  --color-text-disabled:#4a4a6a;

  /* Estado */
  --color-success:      #10b981;
  --color-error:        #ef4444;
  --color-warning:      #f59e0b;

  /* ----------------------------------------------------------
     TIPOGRAFÍA
     ---------------------------------------------------------- */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

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

  /* ----------------------------------------------------------
     RADIOS DE BORDE
     ---------------------------------------------------------- */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS Y GLOW
     ---------------------------------------------------------- */
  --glow-accent:   0 0 30px rgba(79, 70, 229, 0.35);
  --glow-accent-lg:0 0 60px rgba(79, 70, 229, 0.25);
  --glow-cyan:     0 0 30px rgba(6, 182, 212, 0.35);
  --glow-cyan-lg:  0 0 60px rgba(6, 182, 212, 0.25);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glass:  0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ----------------------------------------------------------
     TRANSICIONES
     ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-navbar:   300;
  --z-modal:    400;
  --z-toast:    500;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:  1280px;
  --container-wide: 1440px;
  --navbar-height:  72px;

  /* Breakpoints (referencia — usar en media queries directamente)
     --bp-sm:  640px
     --bp-md:  1024px
     --bp-lg:  1440px
  */

  /* ----------------------------------------------------------
     GLASSMORPHISM
     ---------------------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(16px);
}