/* ============================================================
   Paz House 8.2 F1
   Design tokens semanticos. Esta capa convive con el CSS legacy
   durante la migracion F1-F6 y se convertira en la fuente unica.
   ============================================================ */
:root {
  /* Marca y superficies */
  --ph-bg: #fff8fb;
  --ph-surface: #ffffff;
  --ph-surface-soft: #fff0f7;
  --ph-surface-muted: #f8f5f7;
  --ph-text: #19171c;
  --ph-text-soft: #4f474d;
  --ph-text-muted: #706971;
  --ph-border: #eadfe6;
  --ph-border-strong: #d8c7d1;

  /* Identidad */
  --ph-brand: #ff4fa8;
  --ph-brand-hover: #e83f96;
  --ph-brand-text: #c41f7a;
  --ph-brand-soft: rgba(255, 79, 168, .09);
  --ph-brand-border: rgba(255, 79, 168, .24);
  --ph-coral: #d95864;
  --ph-orange: #f48634;
  --ph-danger: #ce312a;
  --ph-success: #168451;

  /* Tipografia */
  --ph-font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ph-fs-12: .75rem;
  --ph-fs-14: .875rem;
  --ph-fs-16: 1rem;
  --ph-fs-18: 1.125rem;
  --ph-fs-22: 1.375rem;
  --ph-fs-28: 1.75rem;
  --ph-fs-40: 2.5rem;
  --ph-leading-tight: 1.15;
  --ph-leading-body: 1.65;

  /* Espaciado */
  --ph-space-1: 4px;
  --ph-space-2: 8px;
  --ph-space-3: 12px;
  --ph-space-4: 16px;
  --ph-space-5: 24px;
  --ph-space-6: 32px;
  --ph-space-7: 48px;
  --ph-space-8: 64px;

  /* Layout */
  --ph-container: 1280px;
  --ph-gutter: 16px;
  --ph-control-h: 44px;
  --ph-icon-16: 16px;
  --ph-icon-20: 20px;
  --ph-icon-24: 24px;

  /* Radios */
  --ph-radius-sm: 8px;
  --ph-radius-md: 12px;
  --ph-radius-lg: 20px;
  --ph-radius-pill: 999px;

  /* Sombras */
  --ph-shadow-sm: 0 8px 24px rgba(52, 35, 46, .07);
  --ph-shadow-md: 0 18px 48px rgba(52, 35, 46, .11);

  /* Movimiento */
  --ph-ease: cubic-bezier(.2, .72, .2, 1);
  --ph-fast: 160ms var(--ph-ease);
  --ph-medium: 260ms var(--ph-ease);

  /* Z-index oficial 8.2 */
  --ph-z-sticky: 100;
  --ph-z-header: 200;
  --ph-z-cta: 250;
  --ph-z-chat: 350;
  --ph-z-overlay: 400;
  --ph-z-drawer: 500;
  --ph-z-search: 600;
  --ph-z-toast: 700;

  /* Safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Alias temporales del sistema legacy. Se eliminan por componente
     al completar F2-F6. Mantenerlos evita regresiones en produccion. */
  --negro: var(--ph-surface);
  --negro-suave: var(--ph-bg);
  --negro-card: var(--ph-surface);
  --gris-oscuro: var(--ph-surface-muted);
  --gris-titanio: var(--ph-border);
  --gris-medio: #9a9198;
  --gris-claro: var(--ph-text-muted);
  --blanco-marfil: var(--ph-text);
  --blanco-puro: var(--ph-surface);
  --oro: var(--ph-brand);
  --oro-claro: #ff79bd;
  --oro-oscuro: var(--ph-brand-hover);
  --oro-sutil: var(--ph-brand-soft);
  --oro-borde: var(--ph-brand-border);
  --font-display: var(--ph-font-sans);
  --font-editorial: var(--ph-font-sans);
  --font-body: var(--ph-font-sans);
  --radio: var(--ph-radius-md);
  --radio-lg: var(--ph-radius-lg);

  /* Alias de premium-81.css durante la migracion */
  --ph-pink: var(--ph-brand);
  --ph-pink-2: #ff79bd;
  --ph-ink: var(--ph-text);
  --ph-plum: #3d2634;
  --ph-ivory: var(--ph-bg);
  --ph-soft: var(--ph-surface-soft);
  --ph-line: var(--ph-border);
  --ph-muted: var(--ph-text-muted);
  --ph-green: var(--ph-success);
  --ph-shadow: var(--ph-shadow-md);
  --ph-radius: var(--ph-radius-lg);
}

@media (min-width: 768px) {
  :root { --ph-gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --ph-gutter: 32px; }
}