/* ============================================================
 * variables.css — Design system (custom properties)
 * Toda la identidad de AJ Dev en un único sitio.
 * ============================================================ */

:root {
  /* --- Color: fondos --- */
  --bg-primary:   #0A1618;  /* casi negro con tinte cian */
  --bg-secondary: #0E1E21;  /* cards y bloques elevados */
  --bg-tertiary:  #132729;  /* elevación extra */

  /* --- Color: acento corporativo --- */
  --accent:       #07E2FE;
  --accent-soft:  rgba(7, 226, 254, 0.12);
  --accent-hover: rgba(7, 226, 254, 0.4);
  --accent-glow:  rgba(7, 226, 254, 0.35);

  /* --- Color: texto --- */
  --text-primary:   #E6F7F9;
  --text-secondary: #8BA3A6;
  --text-muted:     #7A9599;  /* AA: 5.3:1 sobre --bg-primary */

  /* --- Color: acentos secundarios --- */
  --terminal-green: #00FF9C;
  --error-red:      #FF3B5C;
  --warning-amber:  #FFB800;

  /* --- Tipografía --- */
  --font-display: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* --- Escala tipográfica fluida --- */
  --fs-hero:   clamp(2.5rem, 7vw, 6rem);
  --fs-h2:     clamp(2rem, 4vw, 3.5rem);
  --fs-h3:     1.5rem;
  --fs-body:   1rem;
  --fs-small:  0.85rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --tracking-wide: 0.15em;

  /* --- Espaciado (escala 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* --- Radios --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 4vw, 3rem);
  --section-padding: clamp(4rem, 10vw, 8rem);

  /* --- Transiciones --- */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-medium: 300ms;
  --duration-slow:   600ms;

  /* --- Sombras / glow --- */
  --glow-accent-sm: 0 0 12px rgba(7, 226, 254, 0.25);
  --glow-accent-md: 0 0 24px rgba(7, 226, 254, 0.35);
  --glow-accent-lg: 0 0 48px rgba(7, 226, 254, 0.5);

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(7, 226, 254, 0.15);

  /* --- Z-index scale --- */
  --z-canvas:   -1;
  --z-base:     1;
  --z-sticky:   80;
  --z-floating: 90;
  --z-modal:    100;
  --z-cursor:   9999;
  --z-preloader: 10000;
}

/* Breakpoints (usados vía media queries, aquí solo documentados) */
/*
 * sm:  640px
 * md:  768px
 * lg:  1024px
 * xl:  1280px
 */