/* =========================================================
   Facturel — Sistema de diseño · tokens compartidos (v3 · CELESTE)
   Única fuente de verdad de marca. Importar en TODA superficie
   (landing, portal, admin, cert). No redefinir :root inline.

   Rebranding 2026: de verde esmeralda → CELESTE + AZUL, acento naranja.
   Paleta y valores tomados del Manual de Marca (Marca/). No usar verde
   salvo el token semántico --color-success (estado, nunca marca).
   ========================================================= */

:root {
  /* ---- Marca · CELESTE (primario) ---- */
  --color-primary:        #16A3E0;   /* Celeste — color de marca */
  --color-primary-bright: #3DB8EE;   /* Celeste 400 — hover/CTA */
  --color-primary-dark:   #0A6B9E;   /* Celeste 700 */
  --color-primary-deep:   #0E5A82;   /* Celeste 800 — paneles oscuros */
  --color-primary-soft:   #D6F0FC;   /* Celeste 100 — chips/fondos */
  --color-primary-tint:   #EFF9FE;   /* Celeste 50 — wash */
  --color-primary-light:  #7CD0F5;   /* Celeste 300 — bordes/acentos */

  /* ---- Marca · AZUL (secundario) ---- */
  --color-secondary:      #17357E;   /* Azul marca — wordmark, títulos */
  --color-secondary-dark: #102A5C;   /* Azul 800 */
  --color-secondary-soft: #E2E9F1;   /* Azul 50 */
  --color-accent-blue:    #17357E;   /* alias explícito */

  /* ---- Acento · NARANJA (destacados, warning cálido, Feli) ---- */
  --color-accent:         #FF8A3D;   /* Naranja acento */
  --color-accent-dark:    #E06A17;   /* Naranja hover */
  --color-accent-soft:    #FFE7D2;   /* Naranja 100 */
  --color-accent-tint:    #FFF4EA;   /* Naranja 50 */

  /* ---- Tinta azulada (texto) ---- */
  --color-ink:        #0F1E3D;   /* títulos */
  --color-ink-soft:   #33405E;   /* cuerpo */
  --color-ink-mid:    #5B6780;   /* secundario */
  --color-muted:      #9AA6BC;   /* terciario/placeholder */

  /* ---- Superficies (frías) ---- */
  --color-bg:         #ffffff;
  --color-bg-alt:     #F5F8FC;   /* wash celeste muy claro */
  --color-bg-surface: #EEF3F8;
  --color-border:     #E2E9F1;
  --color-border-2:   #CAD6E5;

  /* ---- Estados ---- */
  --color-success:      #12B76A;   /* verde SOLO semántico (nunca marca) */
  --color-success-soft: #D1FADF;
  --color-error:        #DC2626;
  --color-error-dark:   #B42318;
  --color-error-soft:   #FEECEB;
  --color-warning:      #F59E0B;
  --color-warning-soft: #FEF0C7;
  --color-info:         #16A3E0;   /* celeste = info (alineado a marca) */
  --color-info-soft:    #D6F0FC;

  /* ---- WhatsApp (mockups) ---- */
  --wa-bubble-out: #dcf8c6;
  --wa-bubble-in:  #ffffff;
  --wa-bg:         #ece5dd;

  /* ---- Radios ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Sombras (acabado premium, tinta azulada) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 30, 61, .05);
  --shadow-sm: 0 2px 8px rgba(15, 30, 61, .06);
  --shadow-md: 0 10px 30px rgba(15, 30, 61, .08);
  --shadow-lg: 0 30px 70px rgba(15, 30, 61, .14);
  --shadow-primary: 0 8px 20px rgba(22, 163, 224, .28);   /* glow celeste */
  --shadow-accent:  0 8px 20px rgba(255, 138, 61, .28);   /* glow naranja */

  /* ---- Tipografía ---- */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;

  /* ---- Escala de espaciado (base 4) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --max-width: 1140px;

  /* ---- Gradientes de marca ---- */
  --grad-brand:  linear-gradient(135deg, #16A3E0 0%, #17357E 100%);
  --grad-sky:    linear-gradient(135deg, #3DB8EE 0%, #16A3E0 100%);
  --grad-accent: linear-gradient(135deg, #FF8A3D 0%, #E06A17 100%);

  /* ---- Aliases cortos (compat con superficies existentes) ---- */
  --primary: var(--color-primary);
  --primary-bright: var(--color-primary-bright);
  --primary-dark: var(--color-primary-dark);
  --primary-deep: var(--color-primary-deep);
  --primary-soft: var(--color-primary-soft);
  --primary-tint: var(--color-primary-tint);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --ink-mid: var(--color-ink-mid);
  --muted: var(--color-muted);
  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --surface: var(--color-bg);
  --border: var(--color-border);
  --success: var(--color-success);
  --error: var(--color-error);
  --warning: var(--color-warning);
  --info: var(--color-info);
  --font: var(--font-sans);
}