/* ==========================================================================
   Vigía Design System — Colors & Type · v2 (violet-dominant, dual-mode)
   Recalibrado contra screenshots reales del producto:
   - Dark dramático: dashboards ejecutivos, marketing, hero cards
   - Light suave: módulos operativos, forms, modales, tablas
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ==========================================================
     RAW PALETTE — violet-dominant
     ========================================================== */

  /* Violet (primary) — calibrated from sidebar + Wigi AI + CTA buttons */
  --vg-violet-50:  #F5F1FE;
  --vg-violet-100: #ECE4FD;
  --vg-violet-200: #D9C9FB;
  --vg-violet-300: #BFA1F7;
  --vg-violet-400: #A855F7;   /* hover / glow */
  --vg-violet-500: #8B5CF6;
  --vg-violet-600: #7C3AED;   /* canonical primary */
  --vg-violet-700: #6D28D9;
  --vg-violet-800: #5B21B6;   /* press */
  --vg-violet-900: #4C1D95;
  --vg-violet-950: #2E1065;

  /* Fuchsia (secondary accent — for gradient endings, Wigi badge) */
  --vg-fuchsia-400: #E879F9;
  --vg-fuchsia-500: #D946EF;

  /* Cyan (tertiary — gradient starts, stepper lines) */
  --vg-cyan-400: #22D3EE;
  --vg-cyan-500: #06B6D4;

  /* Navy — app chrome + sidebar (tinted dark, NOT black) */
  --vg-navy-700: #1A2543;
  --vg-navy-800: #121B38;
  --vg-navy-900: #0B1528;   /* canonical app bg-dark */
  --vg-navy-950: #070E1F;

  /* Neutrals — cool slate */
  --vg-ink-0:   #FFFFFF;
  --vg-ink-50:  #F8FAFC;
  --vg-ink-100: #F1F5F9;
  --vg-ink-200: #E2E8F0;
  --vg-ink-300: #CBD5E1;
  --vg-ink-400: #94A3B8;
  --vg-ink-500: #64748B;
  --vg-ink-600: #475569;
  --vg-ink-700: #334155;
  --vg-ink-800: #1E293B;
  --vg-ink-900: #0F172A;

  /* Semantic — pastel-over-ink for operational modules, saturated for dark */
  --vg-success-50:  #DCFCE7;
  --vg-success-100: #BBF7D0;
  --vg-success-500: #22C55E;
  --vg-success-600: #16A34A;
  --vg-success-ink: #15803D;

  --vg-warn-50:  #FEF3C7;
  --vg-warn-100: #FDE68A;
  --vg-warn-500: #F59E0B;
  --vg-warn-ink: #B45309;

  --vg-danger-50:  #FEE2E2;
  --vg-danger-100: #FECACA;
  --vg-danger-500: #EF4444;
  --vg-danger-ink: #B91C1C;

  --vg-info-50:  #DBEAFE;
  --vg-info-100: #BFDBFE;
  --vg-info-500: #3B82F6;
  --vg-info-ink: #1D4ED8;

  /* Framework-accent chips (from screenshots: cada norma = color pastel) */
  --vg-fw-iso:   var(--vg-info-50);     /* 📘 ISO 27001 azul pastel */
  --vg-fw-iso-ink: var(--vg-info-ink);
  --vg-fw-soc:   #EDE9FE;               /* SOC 2 violet pastel */
  --vg-fw-soc-ink: var(--vg-violet-700);
  --vg-fw-ley:   #FEE2E2;               /* Ley Marco rojo pastel (CL patriotic) */
  --vg-fw-ley-ink: var(--vg-danger-ink);
  --vg-fw-gdpr:  #D1FAE5;               /* GDPR verde pastel */
  --vg-fw-gdpr-ink: #047857;

  /* ==========================================================
     BRAND GRADIENTS
     ========================================================== */
  --vg-grad-hero: linear-gradient(135deg, #5B21B6 0%, #7C3AED 40%, #A855F7 75%, #E879F9 100%);
  --vg-grad-modal-header: linear-gradient(90deg, #6D28D9 0%, #8B5CF6 100%);
  --vg-grad-stepper: linear-gradient(90deg, #7C3AED 0%, #22D3EE 100%);
  --vg-grad-wigi: linear-gradient(135deg, #7C3AED 0%, #D946EF 100%);
  --vg-grad-radial-hero: radial-gradient(60% 60% at 50% 40%, rgba(168,85,247,0.55) 0%, rgba(124,58,237,0.25) 35%, rgba(11,21,40,0) 70%);
  --vg-grad-subtle: linear-gradient(180deg, rgba(124,58,237,0.08) 0%, rgba(124,58,237,0) 100%);

  /* ==========================================================
     SEMANTIC TOKENS — DARK (default): ejecutivo, marketing
     ========================================================== */
  --vg-bg:         var(--vg-navy-900);
  --vg-bg-surface: var(--vg-navy-800);
  --vg-bg-raised:  var(--vg-navy-700);
  --vg-bg-sunken:  var(--vg-navy-950);
  --vg-bg-inverse: var(--vg-ink-0);

  --vg-fg-1: #F1F5F9;
  --vg-fg-2: #CBD5E1;
  --vg-fg-3: #94A3B8;
  --vg-fg-4: #64748B;
  --vg-fg:   var(--vg-fg-1);

  --vg-border:        rgba(255,255,255,0.08);
  --vg-border-soft:   rgba(255,255,255,0.04);
  --vg-border-strong: rgba(255,255,255,0.14);
  --vg-border-brand:  rgba(168,85,247,0.35);
  --vg-border-focus:  var(--vg-violet-400);

  --vg-brand:       var(--vg-violet-600);
  --vg-brand-hover: var(--vg-violet-500);
  --vg-brand-press: var(--vg-violet-800);
  --vg-brand-fg:    #FFFFFF;

  --vg-shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --vg-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --vg-shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --vg-shadow-lg: 0 24px 64px rgba(0,0,0,0.55);
  --vg-shadow-glow: 0 0 0 1px rgba(168,85,247,0.35), 0 8px 32px rgba(124,58,237,0.35);
  --vg-shadow-glow-soft: 0 0 40px rgba(168,85,247,0.25);
}

/* ==========================================================
   LIGHT THEME — módulos operativos, tablas, forms, modales
   Uso: <body class="vg-theme-light"> o .vg-light como scope
   ========================================================== */
.vg-theme-light, .vg-light {
  --vg-bg:         var(--vg-ink-50);
  --vg-bg-surface: var(--vg-ink-0);
  --vg-bg-raised:  var(--vg-ink-0);
  --vg-bg-sunken:  var(--vg-ink-100);

  --vg-fg-1: var(--vg-ink-900);
  --vg-fg-2: var(--vg-ink-700);
  --vg-fg-3: var(--vg-ink-500);
  --vg-fg-4: var(--vg-ink-400);
  --vg-fg:   var(--vg-ink-900);

  --vg-border:        #E2E8F0;
  --vg-border-soft:   #F1F5F9;
  --vg-border-strong: #CBD5E1;
  --vg-border-brand:  var(--vg-violet-300);

  --vg-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --vg-shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --vg-shadow-md: 0 10px 24px rgba(15,23,42,0.08);
  --vg-shadow-lg: 0 20px 48px rgba(15,23,42,0.12);
  --vg-shadow-glow: 0 0 0 3px rgba(124,58,237,0.14);
  --vg-shadow-glow-soft: 0 0 0 3px rgba(168,85,247,0.14);
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */
:root {
  --vg-font-sans:  'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --vg-font-serif: 'Instrument Serif', Georgia, serif;
  --vg-font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --vg-text-xs:   11px;
  --vg-text-sm:   13px;
  --vg-text-base: 15px;
  --vg-text-md:   16px;
  --vg-text-lg:   18px;
  --vg-text-xl:   22px;
  --vg-text-2xl:  28px;
  --vg-text-3xl:  36px;
  --vg-text-4xl:  48px;
  --vg-text-5xl:  64px;
  --vg-text-6xl:  88px;

  --vg-leading-tight: 1.1;
  --vg-leading-snug:  1.25;
  --vg-leading-normal: 1.5;
  --vg-leading-relaxed: 1.65;

  --vg-tracking-tightest: -0.04em;
  --vg-tracking-tighter:  -0.025em;
  --vg-tracking-tight:    -0.015em;
  --vg-tracking-normal:   0;
  --vg-tracking-wide:     0.04em;
  --vg-tracking-caps:     0.14em;

  /* Spacing · radii · motion (unchanged from v1) */
  --vg-space-1:  4px;  --vg-space-2:  8px;  --vg-space-3: 12px;
  --vg-space-4: 16px;  --vg-space-5: 20px;  --vg-space-6: 24px;
  --vg-space-8: 32px;  --vg-space-10: 40px; --vg-space-12: 48px;
  --vg-space-16: 64px; --vg-space-20: 80px; --vg-space-24: 96px;

  --vg-radius-xs: 4px;
  --vg-radius-sm: 6px;
  --vg-radius-md: 10px;
  --vg-radius-lg: 14px;
  --vg-radius-xl: 20px;
  --vg-radius-2xl: 28px;
  --vg-radius-full: 9999px;

  --vg-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --vg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --vg-ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
  --vg-dur-fast: 120ms;
  --vg-dur-base: 200ms;
  --vg-dur-slow: 360ms;
}

/* ==========================================================
   TYPE CLASSES
   ========================================================== */
body { font-family: var(--vg-font-sans); color: var(--vg-fg-1); background: var(--vg-bg); -webkit-font-smoothing: antialiased; }

.vg-eyebrow {
  font-family: var(--vg-font-mono);
  font-size: var(--vg-text-xs);
  letter-spacing: var(--vg-tracking-caps);
  text-transform: uppercase;
  color: var(--vg-fg-3);
  font-weight: 500;
}
.vg-h1 { font-family: var(--vg-font-sans); font-size: clamp(44px, 7vw, 88px); line-height: 1.02; letter-spacing: var(--vg-tracking-tightest); font-weight: 700; color: var(--vg-fg-1); }
.vg-h1-display { font-family: var(--vg-font-serif); font-style: italic; font-size: clamp(48px, 7.5vw, 104px); line-height: 1; letter-spacing: -0.03em; font-weight: 400; color: var(--vg-fg-1); }
.vg-h2 { font-family: var(--vg-font-sans); font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; letter-spacing: var(--vg-tracking-tighter); font-weight: 600; }
.vg-h3 { font-family: var(--vg-font-sans); font-size: 28px; line-height: 1.2; letter-spacing: var(--vg-tracking-tight); font-weight: 600; }
.vg-h4 { font-family: var(--vg-font-sans); font-size: 20px; line-height: 1.3; font-weight: 600; }
.vg-lead { font-family: var(--vg-font-sans); font-size: 18px; line-height: 1.6; color: var(--vg-fg-2); max-width: 60ch; }
.vg-body { font-family: var(--vg-font-sans); font-size: 15px; line-height: 1.65; color: var(--vg-fg-2); }
.vg-small { font-family: var(--vg-font-sans); font-size: 13px; color: var(--vg-fg-3); }
.vg-mono, .vg-code { font-family: var(--vg-font-mono); font-size: 0.92em; letter-spacing: -0.01em; }

.vg-stat { font-family: var(--vg-font-sans); font-weight: 700; font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.03em; line-height: 1; }
.vg-stat-gradient { background: var(--vg-grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }

.vg-grad-text { background: var(--vg-grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }

:focus-visible { outline: 2px solid var(--vg-violet-400); outline-offset: 2px; border-radius: var(--vg-radius-sm); }