/* =============================================================================
   PUPPY KING 305 — BRAND TOKENS
   Fuente unica de verdad para colores, tipografia y medidas de la marca.
   Cargado antes de style.css del child theme.
   "Where Royalty Becomes Loyalty"
   ========================================================================== */

:root {
  /* --- Paleta base (spec de marca) --- */
  --pk-black: #0D0D0D;
  --pk-gold: #D4AF37;
  --pk-gold-light: #E8C96A;
  --pk-magenta: #E91E63;
  --pk-white: #FFFFFF;
  --pk-gray: #B5B5B5;

  /* --- Derivados (tonos de apoyo, hover, superficies) --- */
  --pk-black-soft: #151515;      /* cards y superficies sobre negro */
  --pk-black-elevated: #1C1C1C;  /* hover de superficies oscuras */
  --pk-border: rgba(212, 175, 55, 0.28);  /* borde dorado sutil */
  --pk-border-strong: rgba(212, 175, 55, 0.55);
  --pk-gold-dark: #B2912C;       /* hover de dorado */
  --pk-gold-ink: #8A6F1E;        /* dorado LEGIBLE sobre fondo claro (4.8:1 vs blanco) */
  --pk-magenta-dark: #C2185B;    /* hover de magenta (boton primario) */
  --pk-magenta-soft: rgba(233, 30, 99, 0.12);
  --pk-green: #25D366;           /* WhatsApp */
  --pk-green-dark: #1DA851;
  --pk-emerald: #0E9F6E;         /* Video Meet & Greet (Fase 4) */
  --pk-gray-dark: #6E6E6E;
  --pk-body-ink: #4A4A4A;        /* texto de cuerpo sobre claro */

  /* --- Base calida (la del demo original, conservada a proposito) --- */
  --pk-cream: #FAF5EC;           /* fondo general del sitio */
  --pk-cream-deep: #F2E9DA;      /* seccion alterna, un tono mas */
  --pk-cream-warm: #FDF9F2;      /* cards sobre crema */
  --pk-off-white: #F7F5F0;

  /* --- RGB (para rgba() en overlays y sombras) --- */
  --pk-black-rgb: 13, 13, 13;
  --pk-gold-rgb: 212, 175, 55;
  --pk-magenta-rgb: 233, 30, 99;
  --pk-white-rgb: 255, 255, 255;
  --pk-cream-rgb: 250, 245, 236;

  /* --- Gradiente dorado (badges, lineas decorativas) --- */
  --pk-gold-gradient: linear-gradient(135deg, var(--pk-gold) 0%, var(--pk-gold-light) 50%, var(--pk-gold) 100%);

  /* --- Tipografia --- */
  --pk-font-display: 'Oswald', 'Anton', 'Bebas Neue', 'Archivo Black', Impact, sans-serif;
  --pk-font-body: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pk-tracking-display: 0.02em;
  --pk-tracking-label: 0.14em;   /* RAZA en mayusculas, badges */

  /* --- Formas y elevacion --- */
  --pk-radius-sm: 6px;
  --pk-radius: 14px;             /* cards de cachorro */
  --pk-radius-pill: 999px;       /* botones */
  --pk-shadow: 0 4px 18px rgba(var(--pk-black-rgb), 0.10);
  --pk-shadow-hover: 0 14px 34px rgba(var(--pk-black-rgb), 0.20);
  --pk-shadow-gold: 0 6px 22px rgba(var(--pk-gold-rgb), 0.28);
  --pk-transition: 0.28s cubic-bezier(0.25, 0.8, 0.35, 1);

  /* --- Espaciado --- */
  --pk-gap: 20px;
  --pk-tap-target: 46px;         /* alto minimo tactil en movil */

  /* --- Roles semanticos ---------------------------------------------------
     Usar ESTOS en los componentes, no los colores crudos: asi el ajuste de
     contraste se hace en un solo sitio.
     El dorado #D4AF37 da 9:1 sobre negro (excelente) pero solo 2.2:1 sobre
     blanco (ilegible), por eso hay dos tonos segun el fondo.
  ------------------------------------------------------------------------ */
  --pk-heading-on-light: var(--pk-black);   /* poner var(--pk-gold-ink) para titulos dorados en claro */
  --pk-heading-on-dark: var(--pk-gold);
  --pk-text-on-dark: var(--pk-gray);
  --pk-link-on-light: var(--pk-gold-ink);
  --pk-link-on-dark: var(--pk-gold);
  --pk-accent: var(--pk-gold);              /* lineas, iconos, badges */
  --pk-accent-on-light: var(--pk-gold-ink); /* el mismo acento, legible en claro */
  --pk-cta: var(--pk-magenta);              /* boton primario */
  --pk-cta-hover: var(--pk-magenta-dark);

  /* --- Superficies ---------------------------------------------------------
     El sitio es de base CALIDA (como el demo original). El negro se reserva
     para header, footer, barra de confianza y secciones destacadas puntuales.
     Ese contraste es justamente lo que hace que el negro se sienta premium
     en vez de vacio.
  ------------------------------------------------------------------------ */
  --pk-surface: var(--pk-cream);            /* fondo general del sitio */
  --pk-surface-alt: var(--pk-cream-deep);   /* seccion alterna */
  --pk-surface-card: var(--pk-cream-warm);  /* cards sobre crema */
  --pk-surface-invert: var(--pk-black);     /* header, footer, trust bar */
}