/* =====================================================================
   raiknd — Design Tokens
   Identidad visual: Arcade Espacial Atari.
   Vitrina personal. "creando desde 2007" — neón, CRT, galaxia profunda.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. PALETA CROMÁTICA — Base (HEX / RGB / HSL)
   Inspiración: Arcade espacial Atari. Cian neón, magenta, ámbar, fósforo.
   Se expone cada color en 3 formatos para flexibilidad de uso.
   MODO OSCURO ES LA BASE (la estética arcade es oscura por naturaleza).
   --------------------------------------------------------------------- */

:root {
  /* --- Primario: Cian Neón CRT (links, acciones principales, glow) --- */
  --color-primary: #00e5ff;            /* HEX */
  --color-primary-rgb: 0, 229, 255;    /* RGB */
  --color-primary-hsl: 187, 100%, 50%; /* HSL */

  /* Tonalidades del primario */
  --color-primary-light: #66f2ff;
  --color-primary-light-rgb: 102, 242, 255;
  --color-primary-light-hsl: 187, 100%, 70%;

  --color-primary-dark: #0099b3;
  --color-primary-dark-rgb: 0, 153, 179;
  --color-primary-dark-hsl: 187, 100%, 35%;

  /* --- Secundario: Magenta/Rosa Neón (acente arcade, guiño clásico) --- */
  --color-secondary: #ff2dbf;            /* HEX */
  --color-secondary-rgb: 255, 45, 191;   /* RGB */
  --color-secondary-hsl: 316, 100%, 59%; /* HSL */

  --color-secondary-light: #ff7ad9;
  --color-secondary-light-rgb: 255, 122, 217;
  --color-secondary-light-hsl: 316, 100%, 74%;

  --color-secondary-dark: #b30080;
  --color-secondary-dark-rgb: 179, 0, 128;
  --color-secondary-dark-hsl: 316, 100%, 35%;

  /* --- Acento: Amarillo Ámbar Atari (highlights, badges, "insert coin") --- */
  --color-accent: #ffb000;            /* HEX */
  --color-accent-rgb: 255, 176, 0;    /* RGB */
  --color-accent-hsl: 41, 100%, 50%;  /* HSL */

  --color-accent-light: #ffcc66;
  --color-accent-light-rgb: 255, 204, 102;
  --color-accent-light-hsl: 41, 100%, 70%;

  --color-accent-dark: #b37d00;
  --color-accent-dark-rgb: 179, 125, 0;
  --color-accent-dark-hsl: 41, 100%, 35%;

  /* --- Verde Fósforo (terminal/contador retro, "online", éxito) --- */
  --color-phosphor: #33ff66;
  --color-phosphor-rgb: 51, 255, 102;
  --color-phosphor-hsl: 135, 100%, 60%;

  --color-phosphor-dim: #1aa340;
  --color-phosphor-dim-rgb: 26, 163, 64;
  --color-phosphor-dim-hsl: 135, 72%, 37%;

  /* --- Acento 2: Magenta/Rosa (pixel-heart, guiños) — alias de secundario --- */
  --color-pink: var(--color-secondary);
  --color-pink-rgb: var(--color-secondary-rgb);
  --color-pink-hsl: var(--color-secondary-hsl);

  /* --- Fondo galaxia y texto — MODO OSCURO BASE --- */
  --color-bg: #0a0a1a;                 /* azul galaxia profundo, casi negro */
  --color-bg-rgb: 10, 10, 26;
  --color-bg-hsl: 240, 44%, 7%;

  --color-bg-alt: #0d0d2a;             /* fondo de cards / secciones */
  --color-bg-alt-rgb: 13, 13, 42;
  --color-bg-alt-hsl: 240, 53%, 11%;

  --color-surface: #12122e;            /* superficie interior (inputs) */
  --color-surface-rgb: 18, 18, 46;
  --color-surface-hsl: 240, 44%, 13%;

  --color-text: #e8f4ff;               /* texto principal, celeste claro */
  --color-text-rgb: 232, 244, 255;
  --color-text-hsl: 210, 100%, 96%;

  --color-text-muted: #8aa0c8;         /* texto secundario, azul grisáceo claro */
  --color-text-muted-rgb: 138, 160, 200;
  --color-text-muted-hsl: 217, 38%, 66%;

  --color-border: #1f3a5f;             /* bordes sutiles azul oscuro con tinte neón */
  --color-border-rgb: 31, 58, 95;
  --color-border-hsl: 213, 51%, 25%;

  /* --- Estrellas del fondo galaxia (para style.css) --- */
  --color-star: #ffffff;
  --color-star-dim: rgba(255, 255, 255, 0.3);
  --color-star-bright: rgba(255, 255, 255, 0.85);

  /* --- Estados retro arcade --- */
  --color-visited: #ff2dbf;            /* links visitados (magenta neón) */
  --color-visited-rgb: 255, 45, 191;
  --color-visited-hsl: 316, 100%, 59%;

  --color-online: var(--color-phosphor);    /* "online now" — verde fósforo */
  --color-warning: var(--color-accent);     /* under construction — ámbar */

  /* --- Gradientes arcade (neón sobre galaxia) --- */
  --gradient-primary: linear-gradient(180deg, #66f2ff 0%, #00e5ff 100%);
  --gradient-secondary: linear-gradient(180deg, #ff7ad9 0%, #ff2dbf 100%);
  --gradient-accent: linear-gradient(180deg, #ffcc66 0%, #ffb000 100%);
  --gradient-bg: linear-gradient(180deg, #0a0a1a 0%, #0d0d2a 60%, #12122e 100%);
  --gradient-galaxy: radial-gradient(ellipse at 50% 0%, #12122e 0%, #0d0d2a 40%, #0a0a1a 100%);

  /* ---------------------------------------------------------------------
     2. TIPOGRAFÍA
     Mono para acentos técnicos/arcade (terminal/CRT) + sans legible body.
     --------------------------------------------------------------------- */

  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas",
               "Courier New", monospace;
  --font-sans: "Inter", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;

  /* Tamaños fluidos con clamp() — responsive sin media queries */
  --fs-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-sm:   clamp(0.84rem, 0.80rem + 0.2vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
  --fs-md:   clamp(1.10rem, 1.02rem + 0.4vw, 1.25rem);
  --fs-lg:   clamp(1.35rem, 1.20rem + 0.75vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.50rem + 1.25vw, 2.5rem);
  --fs-2xl:  clamp(2.25rem, 1.80rem + 2.25vw, 3.5rem);
  --fs-3xl:  clamp(2.75rem, 2.10rem + 3.25vw, 4.5rem);

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Altura de línea */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-mono: 0.08em;   /* extra para texto terminal/arcade */

  /* ---------------------------------------------------------------------
     3. ESPACIADO (escala 4px base)
     --------------------------------------------------------------------- */

  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* ---------------------------------------------------------------------
     4. RADIOS — pixel art, casi sin redondeo (estética maquinitas)
     --------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm: 0;        /* pixel art puro */
  --radius-md: 2px;      /* cards, inputs — mínimo bisel */
  --radius-lg: 2px;      /* contenedores grandes */
  --radius-pill: 999px;  /* badges, tags (mantener para pills) */

  /* ---------------------------------------------------------------------
     5. SOMBRAS — GLOW NEÓN arcade (reemplazan biselados Web 2.0)
     --------------------------------------------------------------------- */

  /* Glow neón principal */
  --glow-primary: 0 0 10px var(--color-primary);
  --glow-secondary: 0 0 10px var(--color-secondary);
  --glow-accent: 0 0 10px var(--color-accent);
  --glow-phosphor: 0 0 10px var(--color-phosphor);
  --glow-text: 0 0 8px currentColor;

  /* Glow intenso (hover) */
  --glow-primary-strong: 0 0 18px var(--color-primary), 0 0 32px var(--color-primary);
  --glow-secondary-strong: 0 0 18px var(--color-secondary), 0 0 32px var(--color-secondary);
  --glow-accent-strong: 0 0 18px var(--color-accent), 0 0 32px var(--color-accent);

  /* CRT glow ambiental */
  --crt-glow: 0 0 20px rgba(0, 229, 255, 0.3);

  /* Sombras de card arcade: glow neón sutil + sombra oscura */
  --shadow-card: 0 0 12px rgba(0, 229, 255, 0.15), 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 0 20px rgba(0, 229, 255, 0.35), 0 0 40px rgba(255, 45, 191, 0.2), 6px 6px 0 0 rgba(0, 0, 0, 0.6);

  /* Sombra pixel para texto/logo (glow neón) */
  --shadow-pixel: 0 0 6px var(--color-primary);
  --shadow-pixel-accent: 0 0 6px var(--color-accent);

  /* Inset hundido (inputs tipo panel CRT) */
  --shadow-inset: inset 0 0 12px rgba(0, 229, 255, 0.1), inset 0 2px 4px 0 rgba(0, 0, 0, 0.6);

  /* Botón arcade presionado (active) */
  --shadow-arcade-press: inset 0 0 12px rgba(0, 229, 255, 0.4), 0 0 4px var(--color-primary);

  /* Mantener alias --shadow-bevel* por compatibilidad (mapean a glow) */
  --shadow-bevel: 0 0 8px var(--color-primary);
  --shadow-bevel-accent: 0 0 8px var(--color-accent);
  --shadow-bevel-secondary: 0 0 8px var(--color-secondary);

  /* ---------------------------------------------------------------------
     6. BORDES — grosor arcade, neón
     --------------------------------------------------------------------- */

  --border-thin: 1px;
  --border-md: 2px;     /* borde arcade estándar (cian brillante) */
  --border-thick: 3px;

  /* Borde neón cian (para botones/cards arcade) */
  --arcade-border: 2px solid var(--color-primary);
  --arcade-border-accent: 2px solid var(--color-accent);
  --arcade-border-secondary: 2px solid var(--color-secondary);

  /* ---------------------------------------------------------------------
     7. TRANSICIONES
     --------------------------------------------------------------------- */

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  /* ---------------------------------------------------------------------
     8. LAYOUT — contenedor, breakpoints conceptuales
     --------------------------------------------------------------------- */

  --container-max: 1100px;
  --container-narrow: 720px;

  /* ---------------------------------------------------------------------
     9. Z-INDEX
     --------------------------------------------------------------------- */

  --z-base: 1;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* ---------------------------------------------------------------------
     10. EFECTOS ARCADE / RETRO
     --------------------------------------------------------------------- */

  /* Visitor counter: verde fósforo sobre negro (mantener) */
  --counter-digit-bg: #050510;
  --counter-digit-color: #33ff66;
  --counter-digit-glow: 0 0 6px rgba(51, 255, 102, 0.7);

  /* Marquee arcade */
  --marquee-speed: 30s;

  /* Scanlines CRT */
  --scanline-color: rgba(0, 0, 0, 0.15);
  --scanline-color-light: rgba(0, 229, 255, 0.04);
  --scanline-size: 2px;

  /* Animación parpadeo neón */
  --arcade-flicker-duration: 2.5s;
  --arcade-flicker-opacity-min: 0.85;
  --arcade-flicker-opacity-max: 1;

  /* Animación pulso neón (glow breathing) */
  --arcade-pulse-duration: 1.8s;

  /* Insert coin blink */
  --arcade-blink-duration: 1s;
}

/* ---------------------------------------------------------------------
   11. MODO CLARO — prefers-color-scheme: light
   Azul nocturno suave (NO crema). Sigue siendo oscuro/espacial.
   --------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #12122e;                 /* azul nocturno suave */
    --color-bg-rgb: 18, 18, 46;
    --color-bg-hsl: 240, 44%, 13%;

    --color-bg-alt: #1a1a3a;
    --color-bg-alt-rgb: 26, 26, 58;
    --color-bg-alt-hsl: 240, 38%, 16%;

    --color-surface: #20204a;
    --color-surface-rgb: 32, 32, 74;
    --color-surface-hsl: 240, 39%, 21%;

    --color-text: #f0f6ff;               /* blanco azulado brillante */
    --color-text-rgb: 240, 246, 255;
    --color-text-hsl: 213, 100%, 97%;

    --color-text-muted: #9ab0d8;
    --color-text-muted-rgb: 154, 176, 216;
    --color-text-muted-hsl: 219, 42%, 73%;

    --color-border: #2a4a7a;
    --color-border-rgb: 42, 74, 122;
    --color-border-hsl: 217, 49%, 32%;

    /* Acentos ligeramente más suaves en modo claro */
    --color-primary: #33ddff;
    --color-primary-rgb: 51, 221, 255;
    --color-primary-hsl: 190, 100%, 60%;

    --color-secondary: #ff5ec9;
    --color-secondary-rgb: 255, 94, 201;
    --color-secondary-hsl: 318, 100%, 68%;

    --color-accent: #ffc233;
    --color-accent-rgb: 255, 194, 51;
    --color-accent-hsl: 45, 100%, 60%;

    --gradient-bg: linear-gradient(180deg, #12122e 0%, #1a1a3a 60%, #20204a 100%);
    --gradient-galaxy: radial-gradient(ellipse at 50% 0%, #20204a 0%, #1a1a3a 40%, #12122e 100%);

    --shadow-card: 0 0 12px rgba(51, 221, 255, 0.2), 4px 4px 0 0 rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 0 20px rgba(51, 221, 255, 0.4), 0 0 40px rgba(255, 94, 201, 0.25), 6px 6px 0 0 rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 0 12px rgba(51, 221, 255, 0.12), inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);

    --crt-glow: 0 0 20px rgba(51, 221, 255, 0.35);

    --color-star-dim: rgba(255, 255, 255, 0.4);
    --color-star-bright: rgba(255, 255, 255, 0.9);
  }
}

/* ---------------------------------------------------------------------
   12. UTILIDADES DE ACCESIBILIDAD
   --------------------------------------------------------------------- */

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --marquee-speed: 0s;
    --arcade-flicker-duration: 0s;
    --arcade-pulse-duration: 0s;
    --arcade-blink-duration: 0s;
  }
}

/* Foco visible accesible — ring cian neón */
:root {
  --focus-ring: 0 0 0 3px var(--color-primary-light), 0 0 12px var(--color-primary);
  --focus-ring-offset: 2px;
}