/* ============================================================================
 * NÉBULA · Design Tokens v1.0 — Sistema Equilibrio Cósmico
 * Fuente de verdad: Manual de Marca v1.0 (capítulos 08, 09, 15, 16, 21)
 * ----------------------------------------------------------------------------
 * Archivo NUEVO y aditivo: no interfiere con los estilos de mi-espacio.html.
 * Todos los pares de color de estos tokens fueron verificados WCAG 2.2 AA
 * (ver tabla de contrastes del manual). No inventar combinaciones nuevas.
 * ==========================================================================*/

:root {
  /* ----- Color · fondos y superficies ----- */
  --n-bg-primary:      #FAF8F4;  /* blanco cálido — fondo por defecto de TODO */
  --n-bg-secondary:    #F5EDE1;  /* crema — bloques cálidos, footer */
  --n-bg-night:        #0B0E2A;  /* azul noche — SOLO territorio espiritual */
  --n-surface:         #FFFFFF;  /* tarjetas, modales, inputs */
  --n-surface-subtle:  #F5EDE1;
  --n-surface-mist:    #DCE4EC;  /* azul niebla — bienestar emocional */
  --n-surface-lavender:#E6DEF3;  /* lavanda clara — transición espiritual */
  --n-surface-almond:  #EFE3D2;  /* almendra — rituales y tienda */
  --n-surface-sand:    #E7D8C2;
  --n-surface-sage:    #DDE3D7;  /* salvia clara — recursos */
  --n-surface-rose:    #F0DFDA;  /* rosa empolvado — calidez */

  /* ----- Color · texto ----- */
  --n-text-primary:    #1F1C3D;  /* 15.33:1 sobre bg-primary (AAA) */
  --n-text-secondary:  #4E4966;  /*  8.02:1 (AAA) */
  --n-text-inverse:    #F5F0E8;  /* sobre índigo/noche */
  --n-text-ritual:     #332C24;  /* marrón tinta en superficies almendra */
  --n-text-disabled:   #8B879B;  /* SOLO estados disabled */

  /* ----- Color · marca y acción ----- */
  --n-brand:           #1A1147;  /* índigo herencia institucional */
  --n-brand-soft:      #B8A4E3;  /* lavanda — texto SOLO sobre oscuros */
  --n-accent:          #E8C97A;  /* dorado — texto SOLO sobre oscuros; detalle en claro */
  --n-accent-deep:     #9A7B3F;  /* dorado profundo — SOLO texto ≥24px en claro (3.75:1) */
  --n-action:          #2C2260;  /* botón primario (13.96:1 con blanco) */
  --n-action-emotional:#3E5F7E;  /* CTA psicología (6.68:1 con blanco) */
  --n-action-ritual:   #4F5D48;  /* CTA tienda/rituales (6.52:1 con crema) */
  --n-link:            #4A3F8F;  /* enlaces y focus (8.25:1) */
  --n-link-ritual:     #7A5C42;  /* enlaces/precios en superficies almendra (5.67:1) */

  /* ----- Color · bordes y focus ----- */
  --n-border:          #D9D4E2;  /* decorativo (tarjetas, divisores) */
  --n-border-input:    #8B87A0;  /* interactivo: 3.46:1 ≥ 3:1 */
  --n-focus:           #4A3F8F;
  --n-focus-ring:      0 0 0 3px rgba(74, 63, 143, .35);

  /* ----- Color · estados del sistema ----- */
  --n-success:         #2F6B46;  --n-success-surface: #E5EEE2;  --n-success-text: #24543A;
  --n-warning:         #6E5217;  --n-warning-surface: #F7EBD3;  --n-warning-text: #6E5217;
  --n-error:           #A93D34;  --n-error-surface:   #F6DEDA;  --n-error-text:   #7E2D24;
  --n-info:            #274B70;  --n-info-surface:    #DCE8F5;  --n-info-text:    #274B70;

  /* ----- Gradientes permitidos (manual cap. 08-E) ----- */
  --n-grad-amanecer:   linear-gradient(120deg, #FAF8F4 0%, #DCE4EC 55%, #E6DEF3 100%);
  --n-grad-calidez:    linear-gradient(150deg, #FAF8F4 0%, #F5EDE1 55%, #F0DFDA 100%);
  --n-grad-tierra:     linear-gradient(140deg, #FAF6EF 0%, #EFE3D2 55%, #E7D8C2 100%);
  --n-grad-noche:      radial-gradient(ellipse at 50% 0%, #1A1147 0%, #0B0E2A 75%); /* reservado */

  /* ----- Tipografía ----- */
  --n-font-display: 'Cormorant Garamond', Georgia, serif;
  --n-font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --n-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Escala responsive (desktop→móvil vía clamp; manual cap. 10) */
  --n-size-display: clamp(40px, 6vw, 64px);
  --n-size-h1:      clamp(32px, 4.5vw, 52px);
  --n-size-h2:      clamp(24px, 3vw, 34px);
  --n-size-h3:      clamp(20px, 2.2vw, 24px);
  --n-size-h4:      clamp(16px, 1.6vw, 18px);
  --n-size-intro:   clamp(16px, 1.5vw, 18px);
  --n-size-body:    clamp(15px, 1.2vw, 16px);
  --n-size-small:   13.5px;
  --n-size-label:   12px;
  --n-size-btn:     14px;
  --n-lh-tight: 1.15;  --n-lh-heading: 1.3;  --n-lh-base: 1.4;  --n-lh-loose: 1.65;
  --n-tracking-label: .16em;

  /* ----- Espaciado (múltiplos del manual) ----- */
  --n-sp-1: 4px;  --n-sp-2: 8px;   --n-sp-3: 12px;  --n-sp-4: 16px;  --n-sp-5: 24px;
  --n-sp-6: 32px; --n-sp-7: 48px;  --n-sp-8: 64px;  --n-sp-9: 96px;

  /* ----- Radios ----- */
  --n-r-sm: 8px;  --n-r-md: 12px;  --n-r-lg: 16px;  --n-r-xl: 24px;  --n-r-pill: 999px;

  /* ----- Sombras / elevación ----- */
  --n-shadow-sm: 0 2px 8px rgba(31, 28, 61, .06);
  --n-shadow-md: 0 8px 24px rgba(31, 28, 61, .08);
  --n-shadow-lg: 0 16px 44px rgba(31, 28, 61, .10);

  /* ----- Motion ----- */
  --n-dur-fast: 150ms;   /* microinteracciones */
  --n-dur-base: 250ms;   /* botones, inputs */
  --n-dur-slow: 400ms;   /* tarjetas, modales */
  --n-dur-ritual: 700ms; /* SOLO revelación de cartas */
  --n-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --n-ease-organic:  cubic-bezier(.33, 1, .68, 1);

  /* ----- Layout ----- */
  --n-container: 1180px;
  --n-container-text: 720px;
  --n-header-h: 72px;
  --n-header-h-mobile: 60px;
  --n-touch-min: 44px;   /* área táctil mínima obligatoria */
  /* Breakpoints de referencia (usar en @media): 360 / 768 / 1024 / 1280 / 1440 */
}

/* ----- Territorio nocturno (SOLO cartas, revelaciones, campañas) -----
 * Aplicar la clase .n-night únicamente al componente espiritual, jamás
 * a formularios, pagos, psicología, tienda ni páginas completas. */
.n-night {
  --n-text-primary:   var(--n-text-inverse);
  --n-text-secondary: #B8A4E3;   /* lavanda: 8.52:1 sobre noche */
  --n-link:           #E8C97A;   /* dorado: 11.77:1 sobre noche */
  --n-border:         rgba(232, 201, 122, .5);
  background: var(--n-grad-noche);
  color: var(--n-text-inverse);
}