/* ========================================
   CM PLATFORM - DESIGN TOKENS
   Sistema de Diseño Nativo Novit AI
   Fuente de Verdad: Manual de Marca y Sistema Visual Novit
   ======================================== */

:root {
  /* === PALETA OFICIAL NOVIT AI (FUENTE DE VERDAD) === */

  /* Colores Base */
  --novit-azul: #0A0089;          /* Color dominante oficial: titulares, cabeceras, fondos oscuros */
  --novit-celeste: #3DB0E4;       /* Acento sobre fondo oscuro o de color */
  --novit-cyan: #3398DC;          /* Acento sobre fondo claro: etiquetas, categorías, enlaces, foco */
  --novit-blanco: #FFFFFF;        /* Superficie clara y texto sobre fondos oscuros */
  --novit-texto: #333333;         /* Cuerpo de texto principal (sustituye al negro puro) */

  /* Rampa Azul (Mundo, Datos, Entrada de Pieza / Degradé de Cabecera) */
  --novit-azul-profundo: #0D0B92; /* 0% */
  --novit-azul-medio: #1B4BB9;    /* 34% - Fallback de cabecera */
  --novit-azul-claro: #4F8ED5;    /* 74% */
  /* 100% es --novit-cyan (#3398DC) */

  /* Rampa Violeta (La voz de Novit, Novedades, Destacados / Degradé de Cierre) */
  --novit-violeta-osc: #0F0086;   /* 0% */
  --novit-violeta-1: #2C037B;     /* 28% */
  --novit-violeta-2: #510371;     /* 62% - Fallback de cierre y voz de Novit */
  --novit-violeta-3: #85067B;     /* 100% - Extremo claro: flechas, filetes, acento violeta */

  /* Rampa de Grises */
  --novit-gris-superficie: #F3F6F8; /* Fondo de tarjetas y bloques de contenido */
  --novit-gris-borde: #E4E9ED;      /* Bordes y filetes de separación */
  --novit-gris-borde-suave: #EDF0F3;/* Separadores internos sutiles */
  --novit-gris-1: #8A94A0;          /* Texto secundario y etiquetas atenuadas */
  --novit-gris-2: #98A2AE;          /* Metadatos, marcas temporales, pies */
  --novit-gris-3: #A6B0BB;          /* Rótulos de separadores y bordes activos */
  --novit-gris-4: #BCC7D2;          /* Numeración y elementos de apoyo */

  /* Degradés Oficiales Reglamentarios (Ángulo estricto: 100deg) */
  --grad-cabecera-fallback: #1B4BB9;
  --grad-cabecera: linear-gradient(100deg, #0D0B92 0%, #1B4BB9 34%, #4F8ED5 74%, #3398DC 100%);
  --grad-cierre-fallback: #510371;
  --grad-cierre: linear-gradient(100deg, #0F0086 0%, #2C037B 28%, #510371 62%, #85067B 100%);
  --surface-voz-suave-fallback: #F7F2FA;
  --surface-voz-suave: linear-gradient(100deg, #F1EBFB 0%, #F6F0FA 46%, #FCF3F8 100%);
  --novit-logo-gradient: linear-gradient(90deg, var(--novit-celeste) 0%, var(--novit-azul) 100%);

  /* Texturas de Marca (Opacidad 7-8%) */
  --texture-opacity-min: 0.07;
  --texture-opacity-max: 0.08;

  /* Contraste sobre Color */
  --on-color-link: rgba(255, 255, 255, 0.95);
  --on-color-bajada: rgba(255, 255, 255, 0.90);
  --on-color-volanta: rgba(255, 255, 255, 0.85);
  --on-color-detalle: rgba(255, 255, 255, 0.82);
  --on-color-etiqueta: rgba(255, 255, 255, 0.62);
  --on-color-caja: rgba(255, 255, 255, 0.09);
  --on-color-caja-borde: rgba(255, 255, 255, 0.20);


  /* === TOKENS SEMÁNTICOS CM PLATFORM === */

  /* Superficies y Fondos */
  --cm-bg-primary: #0A0E1A;
  --cm-bg-surface: #111827;
  --cm-bg-surface-alt: #1A2234;
  --cm-bg-elevated: #1F2A40;
  --cm-bg-light-surface: var(--novit-gris-superficie);

  /* Acentos Interactivos Novit */
  --cm-accent: var(--novit-cyan);               /* #3398DC - Acento primario interactivo */
  --cm-accent-hover: var(--novit-azul-medio);    /* #1B4BB9 - Paso descendente en rampa */
  --cm-accent-press: var(--novit-azul-profundo); /* #0D0B92 */
  --cm-accent-muted: rgba(51, 152, 220, 0.15);
  --cm-accent-glow: rgba(51, 152, 220, 0.35);
  --cm-accent-on-dark: var(--novit-celeste);     /* #3DB0E4 - Acento para fondos oscuros */

  /* Tokens Directos de Marca */
  --cm-color-azul: var(--novit-azul);
  --cm-color-celeste: var(--novit-celeste);
  --cm-color-cyan: var(--novit-cyan);
  --cm-color-blanco: var(--novit-blanco);
  --cm-color-texto: var(--novit-texto);
  --cm-color-voz: var(--novit-violeta-2);
  --cm-color-voz-destaque: var(--novit-violeta-3);

  /* Texto y Tipografía */
  --cm-text-primary: #F8FAFC;
  --cm-text-secondary: #94A3B8;
  --cm-text-muted: #64748B;
  --cm-text-dark: var(--novit-texto);

  /* Bordes */
  --cm-border: rgba(148, 163, 184, 0.12);
  --cm-border-strong: rgba(148, 163, 184, 0.25);
  --cm-border-accent: var(--novit-cyan);

  /* Estados de Interacción */
  --cm-focus-ring: var(--novit-cyan);
  --cm-state-invalid: var(--novit-violeta-3);

  /* Semáforos de Estado Funcional */
  --cm-status-success: #10B981;
  --cm-status-warning: #F59E0B;
  --cm-status-error: #EF4444;
  --cm-status-info: var(--novit-cyan);

  /* === TYPOGRAPHY TOKENS === */
  --cm-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --cm-text-xs: 0.75rem;
  --cm-text-sm: 0.875rem;
  --cm-text-base: 1rem;
  --cm-text-lg: 1.125rem;
  --cm-text-xl: 1.25rem;
  --cm-text-2xl: 1.5rem;
  --cm-text-3xl: 2rem;
  --cm-text-4xl: 2.5rem;
  --cm-text-5xl: 3.5rem;
  --cm-text-6xl: 4.5rem;

  /* Spacing Tokens */
  --cm-space-xs: 0.25rem;
  --cm-space-sm: 0.5rem;
  --cm-space-md: 1rem;
  --cm-space-lg: 1.5rem;
  --cm-space-xl: 2rem;
  --cm-space-2xl: 3rem;
  --cm-space-3xl: 4rem;

  /* Border Radius */
  --cm-radius-none: 0px;
  --cm-radius-sm: 2px;
  --cm-radius-md: 4px;
  --cm-radius-lg: 8px;
  --cm-radius-pill: 999px;

  /* Shadows */
  --cm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --cm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --cm-shadow-modal: 0 16px 48px rgba(10, 0, 137, 0.25);
  --cm-shadow-glow: 0 0 20px var(--cm-accent-glow);

  /* Breakpoints */
  --cm-bp-mobile: 480px;
  --cm-bp-tablet: 768px;
  --cm-bp-desktop: 1024px;
  --cm-bp-wide: 1440px;
}