/* =========================================================
   WPORIUM DESIGN TOKENS — 0.14.0
   Única fuente de verdad visual del ecosistema WPorium.

   IMPORTANTE:
   Este archivo define VARIABLES, no componentes.
   No debe contener estilos específicos de Home, Header, Footer,
   WooCommerce, Checkout, Catálogo o Mi cuenta.
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     TIPOGRAFÍA
     --------------------------------------------------------- */
  --wpo-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wpo-font-weight-regular: 400;
  --wpo-font-weight-medium: 600;
  --wpo-font-weight-semibold: 700;
  --wpo-font-weight-bold: 800;
  --wpo-font-weight-black: 900;

  /*
   * Escala mínima orientada a lectura real.
   * 12 px queda reservado para metadatos secundarios.
   * Acciones y botones deberán usar 14 px o más al migrarse.
   */
  --wpo-text-xs: 12px;
  --wpo-text-sm: 13px;
  --wpo-text-base: 15px;
  --wpo-text-md: 16px;
  --wpo-text-lg: 18px;
  --wpo-text-xl: 22px;
  --wpo-text-2xl: 28px;
  --wpo-text-3xl: 36px;

  --wpo-line-tight: 1.15;
  --wpo-line-heading: 1.2;
  --wpo-line-body: 1.6;
  --wpo-line-relaxed: 1.7;

  /* ---------------------------------------------------------
     IDENTIDAD / COLOR
     Conservamos la identidad que ya estaba funcionando.
     --------------------------------------------------------- */
  --wpo-dark: #0c1020;
  --wpo-dark-2: #13182b;
  --wpo-ink: #15192a;
  --wpo-muted: #687087;
  --wpo-bg: #f6f7fb;
  --wpo-surface: #ffffff;
  --wpo-border: #e8eaf1;
  --wpo-primary: #6657e8;
  --wpo-primary-hover: #5849d8;
  --wpo-primary-soft: #f0efff;
  --wpo-primary-border: #d9d4ff;
  --wpo-success: #24c86a;
  --wpo-success-soft: #e9f9f0;
  --wpo-danger: #d83b50;
  --wpo-danger-soft: #fff0f2;

  /* Alias semánticos: preferidos para código nuevo. */
  --wpo-color-page: var(--wpo-bg);
  --wpo-color-surface: var(--wpo-surface);
  --wpo-color-text: var(--wpo-ink);
  --wpo-color-text-muted: var(--wpo-muted);
  --wpo-color-border: var(--wpo-border);
  --wpo-color-brand: var(--wpo-primary);
  --wpo-color-brand-hover: var(--wpo-primary-hover);

  /* Texto sobre fondos oscuros. */
  --wpo-on-dark: #ffffff;
  --wpo-on-dark-muted: #b9bfd1;
  --wpo-on-dark-soft: #9299ad;

  /* ---------------------------------------------------------
     ESPACIADO
     Base 4 px. Evita valores arbitrarios en componentes nuevos.
     --------------------------------------------------------- */
  --wpo-space-1: 4px;
  --wpo-space-2: 8px;
  --wpo-space-3: 12px;
  --wpo-space-4: 16px;
  --wpo-space-5: 20px;
  --wpo-space-6: 24px;
  --wpo-space-8: 32px;
  --wpo-space-10: 40px;
  --wpo-space-12: 48px;
  --wpo-space-16: 64px;
  --wpo-space-20: 80px;

  /* ---------------------------------------------------------
     CONTENEDORES / GUTTERS
     --------------------------------------------------------- */
  --wpo-container: 1180px;
  --wpo-gutter-desktop: 20px;
  --wpo-gutter-mobile: 14px;

  /* ---------------------------------------------------------
     RADIOS
     --------------------------------------------------------- */
  --wpo-radius-xs: 8px;
  --wpo-radius-sm: 10px;
  --wpo-radius-md: 12px;
  --wpo-radius-lg: 16px;
  --wpo-radius-xl: 18px;
  --wpo-radius-2xl: 24px;
  --wpo-radius-pill: 999px;

  /* ---------------------------------------------------------
     SOMBRAS
     --wpo-shadow mantiene exactamente la sombra histórica.
     --------------------------------------------------------- */
  --wpo-shadow-xs: 0 4px 14px rgba(18, 24, 40, .05);
  --wpo-shadow-sm: 0 10px 28px rgba(18, 24, 40, .07);
  --wpo-shadow: 0 18px 55px rgba(18, 24, 40, .08);
  --wpo-shadow-lg: 0 26px 70px rgba(18, 24, 40, .12);
  --wpo-shadow-dark: 0 24px 70px rgba(0, 0, 0, .24);

  /* ---------------------------------------------------------
     CONTROLES / TÁCTIL
     Objetivo UX: nunca reducir una acción importante para
     "hacerla caber". Se adapta el layout, no la legibilidad.
     --------------------------------------------------------- */
  --wpo-control-height: 48px;
  --wpo-control-height-compact: 44px;
  --wpo-touch-target: 44px;
  --wpo-button-font-size: 14px;
  --wpo-input-font-size: 16px;

  /* ---------------------------------------------------------
     FOCUS / TRANSICIONES
     --------------------------------------------------------- */
  --wpo-focus-ring: 0 0 0 3px rgba(102, 87, 232, .18);
  --wpo-transition-fast: 150ms ease;
  --wpo-transition: 200ms ease;

  /* ---------------------------------------------------------
     CAPAS
     --------------------------------------------------------- */
  --wpo-z-header: 9990;
  --wpo-z-floating: 9998;
}