/* ============================================================
   Zilowy — Design Tokens v1.0
   ============================================================
   Sistema semántico de 3 capas:
   1. Primitives — valores crudos (no tocar en componentes)
   2. Semantic — significado (usar en componentes)
   3. Component — específicos de UI (opcional)
   4. Bridge — mapea las variables legacy --pg-* (styles.css) al
      nuevo sistema. Permite rebrand sin reescribir styles.css.
   (Las fuentes se cargan vía <link> en theme-css.php.)
   ============================================================ */


/* ============================================================
   1. PRIMITIVES — Valores crudos
   ============================================================ */

:root {
  /* Zilowy brand colors */
  --z-cyan-500: #00D4E5;          /* Acento principal */
  --z-cyan-400: #33DDEB;          /* Hover más brillante */
  --z-cyan-600: #00B5C4;          /* Pressed / activo */
  --z-cyan-50:  rgba(0, 212, 229, 0.08);   /* Bg soft */
  --z-cyan-100: rgba(0, 212, 229, 0.14);   /* Bg hover soft */
  --z-cyan-200: rgba(0, 212, 229, 0.24);   /* Focus ring */

  --z-yellow-500: #FFE500;        /* Pop accent (PRO, NEW, highlight) */
  --z-yellow-50:  rgba(255, 229, 0, 0.12); /* Bg soft */

  /* Navy scale — Woobik family */
  --z-navy-950: #0B132B;          /* Fondo base */
  --z-navy-900: #101A38;          /* Superficie elevada */
  --z-navy-850: #142042;          /* Tarjeta */
  --z-navy-800: #1F2A4A;          /* Border subtle */
  --z-navy-700: #2A3760;          /* Border strong */
  --z-navy-600: #3F4E7A;          /* Divider fuerte / disabled */

  /* Neutrals */
  --z-white:     #FCFCFC;         /* Off-white premium */
  --z-white-90:  #E8EBF2;         /* Text secondary — alto contraste */
  --z-white-70:  #A8B4CC;         /* Text secondary */
  --z-white-50:  #7A8399;         /* Text muted */
  --z-white-30:  #4E5573;         /* Placeholder / disabled text */

  /* Semantic status (compartidos con Vakkio) */
  --z-green-500:  #10B981;        /* Success (mismo que Vakkio) */
  --z-red-500:    #F87171;        /* Error */
  --z-amber-500:  #FBBF24;        /* Warning */

  /* Typography */
  --z-font-display: 'Fraunces', Georgia, serif;
  --z-font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --z-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Font weights */
  --z-fw-regular: 400;
  --z-fw-medium:  500;
  --z-fw-semi:    600;
  --z-fw-bold:    700;

  /* Radius scale */
  --z-radius-xs: 4px;
  --z-radius-sm: 6px;
  --z-radius-md: 8px;
  --z-radius-lg: 12px;
  --z-radius-xl: 16px;
  --z-radius-full: 9999px;

  /* Spacing scale (8pt system, alineado con Vakkio) */
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 16px;
  --z-space-4: 24px;
  --z-space-5: 32px;
  --z-space-6: 40px;
  --z-space-7: 48px;
  --z-space-8: 56px;
  --z-space-9: 64px;
  --z-space-10: 80px;

  /* Type scale */
  --z-text-xs:   12px;
  --z-text-sm:   14px;
  --z-text-base: 16px;
  --z-text-lg:   18px;
  --z-text-xl:   20px;
  --z-text-2xl:  24px;
  --z-text-3xl:  30px;
  --z-text-4xl:  36px;
  --z-text-5xl:  44px;
  --z-text-6xl:  56px;

  /* Line height */
  --z-lh-tight:   1.1;
  --z-lh-heading: 1.25;
  --z-lh-body:    1.5;
  --z-lh-relaxed: 1.65;

  /* Transitions */
  --z-transition-fast:   120ms ease;
  --z-transition-normal: 200ms ease;
  --z-transition-slow:   320ms ease;
}


/* ============================================================
   2. SEMANTIC — Significado. Usar estos en componentes.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-base:      var(--z-navy-950);
  --bg-elevated:  var(--z-navy-900);
  --bg-card:      var(--z-navy-850);
  --bg-inverse:   var(--z-white);

  /* Borders */
  --border-subtle: var(--z-navy-800);
  --border-strong: var(--z-navy-700);
  --border-focus:  var(--z-cyan-500);

  /* Text */
  --text-primary:   var(--z-white);
  --text-secondary: var(--z-white-70);
  --text-muted:     var(--z-white-50);
  --text-disabled:  var(--z-white-30);
  --text-inverse:   var(--z-navy-950);
  --text-on-accent: var(--z-navy-950);  /* Texto sobre cyan — patrón botón primario */
  --text-on-pop:    var(--z-navy-950);  /* Texto sobre amarillo */

  /* Accent primary (cyan) */
  --accent:         var(--z-cyan-500);
  --accent-hover:   var(--z-cyan-400);
  --accent-pressed: var(--z-cyan-600);
  --accent-soft:    var(--z-cyan-50);
  --accent-soft-hover: var(--z-cyan-100);
  --accent-ring:    var(--z-cyan-200);

  /* Accent pop (yellow) — Woobik family bridge */
  --pop:           var(--z-yellow-500);
  --pop-soft:      var(--z-yellow-50);

  /* Status */
  --success: var(--z-green-500);
  --error:   var(--z-red-500);
  --warning: var(--z-amber-500);

  /* Typography semantic */
  --font-display: var(--z-font-display);
  --font-body:    var(--z-font-body);
  --font-mono:    var(--z-font-mono);
}


/* ============================================================
   3. COMPONENT tokens (opcional, ejemplo para botón)
   ============================================================ */

:root {
  /* Buttons */
  --btn-primary-bg:        var(--accent);
  --btn-primary-bg-hover:  var(--accent-hover);
  --btn-primary-text:      var(--text-on-accent);
  --btn-primary-radius:    var(--z-radius-md);

  --btn-secondary-bg:      transparent;
  --btn-secondary-text:    var(--text-primary);
  --btn-secondary-border:  var(--border-strong);

  /* Inputs */
  --input-bg:            var(--bg-card);
  --input-border:        var(--border-subtle);
  --input-border-focus:  var(--border-focus);
  --input-text:          var(--text-primary);
  --input-placeholder:   var(--text-muted);

  /* Cards */
  --card-bg:      var(--bg-elevated);
  --card-border:  var(--border-subtle);
  --card-radius:  var(--z-radius-lg);
}


/* ============================================================
   4. BRIDGE — legacy --pg-global-color-* → nuevo sistema.
   styles.css sigue usando estas variables; aquí las redirigimos
   al brand Zilowy (cyan/navy). Incluye el FIX del bug -rgb
   (antes 181,98,0 no coincidía con el primario).
   ============================================================ */

:root {
  --pg-global-color-primary:      var(--accent);      /* naranja → cyan */
  --pg-global-color-primary-rgb:  0, 212, 229;        /* FIX: ahora coincide con el primario */
  --pg-global-color-text:         var(--text-secondary);
  --pg-global-color-bg:           var(--bg-base);     /* #08080a → navy #0B132B */
  --pg-global-color-bg-start:     var(--z-cyan-400);  /* gradiente login blob */
  --pg-global-color-bg-end:       var(--accent);
}


/* ============================================================
   TYPOGRAPHY UTILITIES

   Regla estricta:
   - Logo Zilowy: wordmark custom en SVG. NO se compone con fuente.
   - Fraunces italic: SOLO hero headline de landing y storytelling About.
   - Todo lo demás (UI, dashboard, cards, botones, formularios): IBM Plex Sans.
   ============================================================ */

.hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--z-fw-regular);
  font-size: var(--z-text-6xl);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -0.02em;
  line-height: var(--z-lh-tight);
}

.about-story {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--z-fw-regular);
  font-size: var(--z-text-xl);
  font-variation-settings: 'opsz' 60, 'SOFT' 50;
  line-height: var(--z-lh-relaxed);
  color: var(--text-secondary);
}

.h1 { font-family: var(--font-body); font-size: var(--z-text-5xl); font-weight: var(--z-fw-semi); line-height: var(--z-lh-heading); letter-spacing: -0.02em; }
.h2 { font-family: var(--font-body); font-size: var(--z-text-3xl); font-weight: var(--z-fw-semi); line-height: var(--z-lh-heading); letter-spacing: -0.01em; }
.h3 { font-family: var(--font-body); font-size: var(--z-text-xl);  font-weight: var(--z-fw-semi); line-height: var(--z-lh-heading); }
.body { font-family: var(--font-body); font-size: var(--z-text-base); font-weight: var(--z-fw-regular); line-height: var(--z-lh-body); }
.small { font-family: var(--font-body); font-size: var(--z-text-sm); font-weight: var(--z-fw-regular); line-height: var(--z-lh-body); }
.mono { font-family: var(--font-mono); font-size: var(--z-text-sm); }