/* ==========================================================================
   01-TOKENS.CSS — M2 GROUP DESIGN SYSTEM (WEBSITE-V3)
   Tokens semánticos, paleta de colores Dark/Light, tipografía y elevaciones.
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

:root {
  /* ==================== TIPOGRAFÍA ==================== */
  --font-display: 'Clash Display', 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* System monospace: no extra web-font download (W-V2). */
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace;

  /* Escala Modular Fluida (clamp) */
  --fs-2xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);   /* 11px - 12px */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);    /* 12px - 13px */
  --fs-sm: clamp(0.8125rem, 0.78rem + 0.3vw, 0.875rem);   /* 13px - 14px */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); /* 15px - 17px */
  --fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);    /* 17px - 19px */
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20px - 24px */
  --fs-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);     /* 24px - 30px */
  --fs-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);   /* 30px - 38px */
  --fs-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.125rem);    /* 36px - 50px */
  --fs-4xl: clamp(2.75rem, 2.35rem + 2vw, 4.25rem);       /* 44px - 68px */
  --fs-display: clamp(3.25rem, 2.75rem + 3vw, 5.75rem);   /* 52px - 92px */

  /* Pesos de Fuente */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Espaciado Sistemático */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: clamp(64px, 8vw, 140px);

  /* Radios de Borde */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Curvas Bézier y Tiempos */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 150ms;
  --duration-fast: 250ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;
  --duration-epic: 1200ms;

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 500;
  --z-cursor: 9999;
}

/* ==========================================================================
   MODO OSCURO (DEFAULT — FinTech Abisal & Lujo Minimalista)
   Inspiración: mercury.com, ario.law
   ========================================================================== */
[data-theme="dark"] {
  /* Fondos y Canvas */
  --bg-canvas: #050811;
  --bg-surface: #0A0F1D;
  --bg-surface-elevated: #111827;
  --bg-surface-glass: rgba(10, 15, 29, 0.65);
  --bg-surface-hover: rgba(255, 255, 255, 0.04);
  --bg-subtle: rgba(255, 255, 255, 0.02);
  --bg-overlay: rgba(5, 8, 17, 0.88);

  /* Textos y Contraste */
  --text-main: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #7C8BA3;
  --text-faint: #334155;
  --text-inverse: #0F172A;

  /* División M2 Advisory (Azul Financiero, Cyan y Oro Institucional) */
  --advisory-blue: #2563EB;
  --advisory-blue-glow: rgba(37, 99, 235, 0.35);
  --advisory-cyan: #38BDF8;
  --advisory-gold: #F59E0B;
  --advisory-gold-glow: rgba(245, 158, 11, 0.3);

  /* División Mitabela (Rosa Carmesí Andina, Oro y Esmeralda) */
  --mitabela-crimson: #E11D48;
  --mitabela-rose: #FB7185;
  --mitabela-rose-glow: rgba(251, 113, 133, 0.35);
  --mitabela-gold: #EAB308;
  --mitabela-emerald: #10B981;

  /* Bordes de Cristal y Efectos */
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.22);
  --glass-border-active: rgba(255, 255, 255, 0.4);
  --glass-highlight: rgba(255, 255, 255, 0.04);
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;
  --glass-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5);

  /* Íconos Minimalistas */
  --icon-stroke: rgba(248, 250, 252, 0.8);
  --icon-stroke-hover: #FFFFFF;
  --icon-capsule-bg: rgba(255, 255, 255, 0.04);
  --icon-capsule-border: rgba(255, 255, 255, 0.1);

  /* Spotlights Reactivos al Cursor */
  --spotlight-advisory: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(37, 99, 235, 0.16), transparent 45%);
  --spotlight-mitabela: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(225, 29, 72, 0.16), transparent 45%);
}

/* ==========================================================================
   MODO CLARO (Elegancia Editorial & Transparencias Nítidas)
   Inspiración: vetter-consulting-en.webflow.io, valdanitrading.com
   ========================================================================== */
[data-theme="light"] {
  /* Fondos y Canvas */
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-surface-glass: rgba(255, 255, 255, 0.78);
  --bg-surface-hover: rgba(15, 23, 42, 0.03);
  --bg-subtle: rgba(15, 23, 42, 0.02);
  --bg-overlay: rgba(248, 250, 252, 0.88);

  /* Textos y Contraste */
  --text-main: #0F172A;
  --text-secondary: #475569;
  --text-muted: #5B6B82;
  --text-faint: #CBD5E1;
  --text-inverse: #F8FAFC;

  /* División M2 Advisory */
  --advisory-blue: #1D4ED8;
  --advisory-blue-glow: rgba(29, 78, 216, 0.18);
  --advisory-cyan: #0284C7;
  --advisory-gold: #D97706;
  --advisory-gold-glow: rgba(217, 119, 6, 0.15);

  /* División Mitabela */
  --mitabela-crimson: #BE123C;
  --mitabela-rose: #E11D48;
  --mitabela-rose-glow: rgba(225, 29, 72, 0.18);
  --mitabela-gold: #B45309;
  --mitabela-emerald: #059669;

  /* Bordes de Cristal y Efectos */
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-hover: rgba(15, 23, 42, 0.2);
  --glass-border-active: rgba(15, 23, 42, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;
  --glass-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08);

  /* Íconos Minimalistas */
  --icon-stroke: rgba(15, 23, 42, 0.85);
  --icon-stroke-hover: #0F172A;
  --icon-capsule-bg: rgba(15, 23, 42, 0.03);
  --icon-capsule-border: rgba(15, 23, 42, 0.09);

  /* Spotlights Reactivos al Cursor */
  --spotlight-advisory: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(29, 78, 216, 0.07), transparent 45%);
  --spotlight-mitabela: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(190, 18, 60, 0.07), transparent 45%);
}