/* ==========================================================================
   TCG Doczel v2 · Tokens de diseño (modo claro)
   Fuente de verdad: design-system/tcg-doczel/MASTER.md
   Regla: los componentes usan SOLO estas variables, nunca hex sueltos.
   El modo oscuro se diseñará aparte (no se obtiene invirtiendo estos valores).
   ========================================================================== */

/* --- Tipografía alojada en el proyecto (funciona sin conexión / PWA) ----- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* --- Color: superficies --------------------------------------------- */
  --color-bg: #EEFBF4;              /* menta clara, fondo de la página */
  --color-surface: #FFFFFF;         /* tarjetas */
  --color-surface-muted: #E1F5EB;   /* chips, zonas secundarias */

  /* --- Color: texto ----------------------------------------------------- */
  --color-text: #0F2A1F;            /* 14.4:1 sobre fondo */
  --color-text-muted: #4B6358;      /* 5.7:1 en el peor caso (sobre atenuado) */
  --color-text-on-primary: #FFFFFF;
  --color-text-on-action: #FFFFFF;

  /* --- Color: bordes ---------------------------------------------------- */
  --color-border: #D3EFE2;          /* decorativo: bordes de tarjetas y separadores */
  --color-border-control: #6B8F7E;  /* inputs, selects, checkboxes: >=3:1 sobre cualquier superficie */

  /* --- Color: marca ----------------------------------------------------- */
  --color-primary: #059669;         /* fondos grandes, íconos, acentos, anillo de foco. NUNCA texto blanco encima */
  --color-primary-text: #047857;    /* texto verde y botones con texto blanco (5.5:1) */
  --color-primary-text-hover: #065F46;
  --color-action: #C2410C;          /* SOLO lo que se puede tocar: botones y acciones con texto blanco (5.2:1) */
  --color-action-hover: #9A3412;
  --color-action-decorative: #EA580C; /* solo elementos grandes o decorativos dentro de algo tocable, nunca con texto chico */

  /* --- Color: etiquetas informativas (no se tocan, por eso nunca naranja) */
  --color-tag-rarity: #0F2A1F;        /* fondo de la etiqueta de rareza: neutro oscuro */
  --color-text-on-tag-rarity: #FFFFFF; /* 15.3:1 */

  /* --- Color: imagen de carta que no cargó (o carta sin imagen) --------- */
  --color-image-fallback: var(--color-surface-muted);
  --color-image-fallback-icon: var(--color-text-muted);

  /* --- Color: variación de precio (siempre acompañado de flecha o signo) */
  --color-price-up: #047857;        /* alza: con flecha ↗ o signo + */
  --color-price-down: #DC2626;      /* baja: con flecha ↘ o signo −. Solo sobre --color-surface o --color-bg */

  /* --- Color: estados ---------------------------------------------------- */
  --color-focus-ring: var(--color-primary);
  --color-disabled-bg: #E1F5EB;
  --color-disabled-text: #6B8F7E;   /* deshabilitado: WCAG no exige contraste, igual se lee */
  --color-skeleton: #E1F5EB;
  --color-skeleton-shine: #F4FCF8;
  --color-overlay: rgb(15 42 31 / 0.5);

  /* --- Tipografía -------------------------------------------------------- */
  --font-family-base: "Plus Jakarta Sans", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Escala pensada para 375 px. Nada de texto de lectura bajo 12 px. */
  --font-size-xs: 0.75rem;    /* 12px  etiquetas, "Ejemplo", metadatos */
  --font-size-sm: 0.875rem;   /* 14px  texto secundario, chips */
  --font-size-md: 1rem;       /* 16px  texto base e inputs (evita el zoom de iOS) */
  --font-size-lg: 1.125rem;   /* 18px  títulos de tarjeta */
  --font-size-xl: 1.375rem;   /* 22px  precios en tarjetas */
  --font-size-2xl: 1.75rem;   /* 28px  títulos de pantalla */
  --font-size-3xl: 2.25rem;   /* 36px  precio destacado en detalle */

  --line-height-tight: 1.15;  /* precios y títulos grandes */
  --line-height-snug: 1.3;    /* títulos de tarjeta */
  --line-height-base: 1.5;    /* texto de lectura */

  --letter-spacing-tight: -0.02em;  /* títulos y precios grandes */
  --letter-spacing-caps: 0.06em;    /* etiquetas en mayúsculas */

  /* --- Espacios (ritmo de 4 px; densidad 6/10) -------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px  margen lateral en celular */
  --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 */

  /* --- Layout ------------------------------------------------------------- */
  --layout-gutter: var(--space-4);
  --layout-max-width: 72rem;        /* 1152px en escritorio */
  --bento-gap: var(--space-3);
  --tap-target-min: 2.75rem;        /* 44px: mínimo de área táctil */
  --bottom-nav-height: 4rem;        /* 64px, sin contar el safe area */

  /* --- Forma ---------------------------------------------------------------- */
  --radius-card: 22px;              /* tarjetas y tiles bento */
  --radius-sm: 14px;                /* botones, inputs, chips cuadrados, imágenes en lista */
  --radius-xs: 8px;                 /* etiquetas pequeñas */
  --radius-pill: 999px;
  --radius-card-image: 4.5% / 3.2%; /* esquinas de una carta física (63×88 mm), proporcional */
  --card-aspect-ratio: 63 / 88;     /* proporción real de una carta Pokémon */

  --border-width: 1px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* --- Sombras (teñidas de verde) --------------------------------------- */
  --shadow-card: 0 8px 20px -12px rgb(5 150 105 / 0.35);
  --shadow-card-hover: 0 14px 28px -14px rgb(5 150 105 / 0.45);
  --shadow-floating: 0 -6px 20px -14px rgb(5 150 105 / 0.45);  /* navegación inferior */
  --shadow-popover: 0 16px 32px -16px rgb(15 42 31 / 0.35);    /* autocompletado */

  /* --- Íconos ---------------------------------------------------------------- */
  --icon-size-sm: 1rem;     /* 16px junto a texto chico */
  --icon-size-md: 1.25rem;  /* 20px en botones y navegación */
  --icon-size-lg: 1.5rem;   /* 24px sueltos */
  --icon-stroke: 2;

  /* --- Movimiento -------------------------------------------------------- */
  --duration-instant: 100ms;  /* respuesta al toque */
  --duration-fast: 160ms;     /* hover, color */
  --duration-base: 240ms;     /* aparecer/desaparecer */
  --duration-slow: 400ms;     /* volver de la inclinación holo */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Efecto holográfico ---------------------------------------------- */
  --holo-max-tilt: 14deg;
  --holo-perspective: 900px;
  --holo-shine-opacity: 0.5;
  --holo-glare-opacity: 0.35;

  /* --- Capas ---------------------------------------------------------------- */
  --z-sticky: 10;
  --z-nav: 20;
  --z-popover: 30;
  --z-modal: 40;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}