/**
 * Pixelhive Design System - Brand Color Tokens
 * Generated from official brand assets: Emblema hexagonal & Logotipo Pixelhive
 * Company: Pixelhive - Building Software Ecosystems
 * v1.2 - colores auxiliares tokenizados (claro/papel, tinta, error, ámbar).
 * v1.1 - añadido --ph-color-text-subtle-aa (texto terciario accesible) y fuentes autoalojadas.
 */

:root {
  /* Brand Primary Turquoise & Cyan */
  --ph-color-electric-cyan: #17f3d7;
  --ph-color-electric-cyan-rgb: 23, 243, 215;
  --ph-color-vibrant-turquoise: #01d0cc;
  --ph-color-vibrant-turquoise-rgb: 1, 208, 204;
  --ph-color-deep-teal: #00aea2;
  --ph-color-deep-teal-rgb: 0, 174, 162;
  --ph-color-mid-teal: #01a8a7;
  --ph-color-mid-teal-rgb: 1, 168, 167;

  /* Backgrounds & Obsidian Petrol Foundations */
  --ph-color-obsidian-deep: #011721;
  --ph-color-obsidian-deep-rgb: 1, 23, 33;
  --ph-color-midnight-petrol: #012838;
  --ph-color-midnight-petrol-rgb: 1, 40, 56;
  --ph-color-dark-cyan-surface: #022e3a;
  --ph-color-dark-cyan-surface-rgb: 2, 46, 58;
  --ph-color-surface-elevated: #043b4a;
  --ph-color-surface-elevated-rgb: 4, 59, 74;

  /* Typography / Text Colors */
  --ph-color-text-crisp: #e5fcf9;
  --ph-color-text-crisp-rgb: 229, 252, 249;
  --ph-color-text-white: #ffffff;
  --ph-color-text-muted: #8ba6ad;
  --ph-color-text-subtle: #4a6e78;      /* Solo decorativo / deshabilitado (no cumple AA como texto) */
  --ph-color-text-subtle-aa: #7b99a1;   /* Texto terciario accesible: 6.0:1 sobre Obsidian, 4.75:1 sobre Dark Cyan Surface */

  /* Borders & Glassmorphism */
  --ph-border-subtle: rgba(23, 243, 215, 0.12);
  --ph-border-medium: rgba(23, 243, 215, 0.25);
  --ph-border-bright: rgba(23, 243, 215, 0.6);
  --ph-surface-glass: rgba(2, 46, 58, 0.65);
  --ph-surface-glass-hover: rgba(2, 46, 58, 0.85);

  /* Status Tokens */
  --ph-status-live: #10b981;
  --ph-status-live-glow: rgba(16, 185, 129, 0.35);
  --ph-status-beta: #01d0cc;
  --ph-status-beta-glow: rgba(1, 208, 204, 0.35);
  --ph-status-dev: #f59e0b;
  --ph-status-dev-glow: rgba(245, 158, 11, 0.35);

  /* Gradients */
  --ph-gradient-primary: linear-gradient(135deg, #17f3d7 0%, #01d0cc 50%, #00aea2 100%);
  --ph-gradient-radial-glow: radial-gradient(circle, rgba(23, 243, 215, 0.15) 0%, rgba(1, 208, 204, 0.04) 50%, transparent 75%);
  --ph-gradient-card: linear-gradient(145deg, rgba(2, 46, 58, 0.65) 0%, rgba(1, 40, 56, 0.8) 100%);
  --ph-gradient-border: linear-gradient(135deg, rgba(23, 243, 215, 0.45) 0%, rgba(1, 208, 204, 0.1) 40%, rgba(4, 59, 74, 0.4) 100%);

  /* Shadows & Glows */
  --ph-glow-sm: 0 0 15px rgba(23, 243, 215, 0.2);
  --ph-glow-md: 0 0 30px rgba(23, 243, 215, 0.3);
  --ph-glow-lg: 0 0 60px rgba(1, 208, 204, 0.25);
  --ph-shadow-card: 0 12px 36px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--ph-border-subtle);

  /* Colores auxiliares (v1.2): antes sueltos en styles.css; ahora todo el color pasa por tokens */
  --ph-color-black: #000000;
  --ph-color-black-rgb: 0, 0, 0;
  --ph-color-abyss: #010f16;
  --ph-color-abyss-rgb: 1, 15, 22;
  --ph-color-abyss-deep: #01121a;
  --ph-color-abyss-deep-rgb: 1, 18, 26;
  --ph-color-abyss-soft: #011822;
  --ph-color-dialog-surface: #012433;
  --ph-color-teal-on-paper-deep: #065f56;
  --ph-color-teal-on-paper: #087e73;
  --ph-color-ink: #0b2530;
  --ph-color-ink-rgb: 11, 37, 48;
  --ph-color-panel-dark: #0b2a35;
  --ph-status-live-rgb: 16, 185, 129;
  --ph-color-danger-ink: #1a0705;
  --ph-color-ink-muted: #35525b;
  --ph-color-ink-subtle: #4a6670;
  --ph-color-paper-line-strong: #b7ddd6;
  --ph-color-paper-line: #d5e6e3;
  --ph-color-paper-tint: #e3f3f0;
  --ph-color-danger: #ea6e63;
  --ph-color-danger-rgb: 234, 110, 99;
  --ph-color-paper: #f2f8f7;
  --ph-color-paper-raised: #fafdfc;   /* superficie elevada sobre el papel: tintada, nunca #fff puro */
  --ph-color-paper-cool: #f4f5f9;
  --ph-status-dev-rgb: 245, 158, 11;
  --ph-color-error: #f87171;
  --ph-color-error-rgb: 248, 113, 113;
  --ph-color-amber: #fbbf24;
  --ph-color-error-soft: #fca5a5;
  --ph-color-amber-soft: #fcd34d;
  --ph-color-amber-pale: #fde68a;
  --ph-color-danger-soft: #ff9a90;
  --ph-color-text-white-rgb: 255, 255, 255;

  /* Escala cerrada (v1.2): tamaños de letra, radios y movimiento */
  --ph-text-xs: 0.75rem;   /* 12 */
  --ph-text-sm: 0.875rem;  /* 14 */
  --ph-text-md: 1rem;      /* 16 */
  --ph-text-lg: 1.125rem;  /* 18 */
  --ph-text-xl: 1.5rem;    /* 24 */
  --ph-text-2xl: 2rem;     /* 32 */
  --ph-text-3xl: 3rem;     /* 48 */
  --ph-text-4xl: 4rem;     /* 64 */
  --ph-radius-sm: 6px;
  --ph-radius-md: 12px;
  --ph-radius-lg: 16px;
  --ph-radius-xl: 24px;
  --ph-radius-pill: 999px;
  --ph-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevación: tres niveles (reposo, elevado, superposición) + brillo y acento */
  --ph-shadow-rest: 0 8px 24px rgba(var(--ph-color-black-rgb), 0.45);
  --ph-shadow-raised: 0 24px 50px -14px rgba(var(--ph-color-black-rgb), 0.65);
  --ph-shadow-overlay: 0 30px 80px rgba(var(--ph-color-black-rgb), 0.85), 0 0 50px rgba(var(--ph-color-electric-cyan-rgb), 0.2);
  --ph-glow: 0 0 24px rgba(var(--ph-color-electric-cyan-rgb), 0.2);
  --ph-shadow-accent: 0 4px 22px rgba(var(--ph-color-electric-cyan-rgb), 0.35);
  --ph-shadow-accent-hover: 0 8px 32px rgba(var(--ph-color-electric-cyan-rgb), 0.5);

  /* Capas: escala declarada. 0-4 son locales a su componente; el resto, globales */
  --ph-z-raised: 10;
  --ph-z-sticky: 100;
  --ph-z-grain: 999;
  --ph-z-modal: 1000;
  --ph-z-toast: 2000;
  --ph-z-top: 3000;

  /* Typography */
  --ph-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ph-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ph-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}