/*
  Tool Hub — Design Tokens
  Fuente única de verdad para color, tipografía, espaciado, radios,
  sombras, transiciones y foco. Todas las páginas (home + herramientas)
  importan este archivo antes de sus propios estilos:

    <link rel="stylesheet" href="[ruta]/assets/design-tokens.css">
    <link rel="stylesheet" href="[ruta]/assets/toolhub.css">
    <link rel="stylesheet" href="styles.css">

  No redeclarar estas variables en :root de cada página — si una
  herramienta necesita un acento propio, crear una variable local que
  *referencia* un token (ej. --accent: var(--legendary);), nunca un
  valor hexadecimal nuevo.
*/
:root {
  /* — Superficies — */
  --void: #0a0b0f;        /* fondo de página */
  --void-2: #101219;      /* fondo secundario / degradé de paneles */
  --panel: #14161e;       /* superficie de tarjetas y paneles */
  --panel-border: #262a37;
  --panel-hover: color-mix(in srgb, var(--panel) 92%, white);

  /* — Texto — */
  --ink: #eef0f5;         /* texto principal */
  --muted: #7b7f8f;       /* texto secundario / metadatos */
  --muted-dim: color-mix(in srgb, var(--muted) 70%, transparent);

  /* — Marca / holo — */
  --holo-a: #7c5cff;
  --holo-b: #29e0d6;
  --holo-gradient: linear-gradient(120deg, var(--holo-a), var(--holo-b));

  /* — Rarezas (tiers) — */
  --common: #9a9da8;
  --rare: #29b6f0;
  --epic: #a15cff;
  --legendary: #ffb020;
  --uncommon: #35d488;
  --mythic: #ffd84a;

  /* — Estados semánticos — */
  --success: #35d488;
  --danger: #ff5c72;
  --warning: #ffb020;
  --info: #29b6f0;

  /* — Tipografía — */
  --font-display: "Chakra Petch", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* — Radios y forma — */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --clip-corner: 14px; /* usado en clip-path de tarjetas "slot" */

  /* — Sombras — */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px -14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, 0.65);

  /* — Movimiento — */
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* — Foco accesible (WCAG 2.4.7) — */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--holo-b) 55%, transparent);
  --focus-outline: 2px solid var(--holo-b);
}

/* Foco visible consistente para todo elemento interactivo del sitio.
   Se define acá una sola vez en vez de repetirlo (o de olvidarlo) en
   cada herramienta. */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-med: 0s;
    --transition-slow: 0s;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}