/* tokens.css — Sistema de diseño IdenQ v2 (copiado de _tokens.v2.scss, resuelto a CSS)
   Dark es el tema por defecto. Excepción pedida: el FONDO del modo oscuro se
   sustituye por negro mate (#0a0a0a) en vez del gradiente azul original. */

:root,
[data-theme="dark"] {
  /* Backgrounds — fondo del modo oscuro = negro mate (override intencional) */
  --color-bg:               #0a0a0a;
  --color-bg-gradient:      #0a0a0a;
  --color-bg-gradient-from: #0a0a0a;
  --color-bg-gradient-to:   #0a0a0a;
  --color-bg-card:          #171717;
  --color-bg-card-glass:    rgba(255, 255, 255, 0.08);
  --color-bg-input:         rgba(255, 255, 255, 0);
  --color-bg-icon-btn:      #262626;
  --color-border:           #262626;
  --color-border-input:     rgba(255, 255, 255, 0.7);

  /* Text */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #e5ebef;
  --color-text-muted:     #a3a3a3;
  --color-text-inverse:   #020515;

  /* Brand / CTA */
  --color-cta:            #faec52;
  --color-cta-hover:      #fff483;
  --color-cta-deep:       #c5b835;

  /* Accent */
  --color-accent-blue:    #4e74e2;
  --color-accent-aqua:    #16e9d7;

  /* Status */
  --color-status-secured:    #22c55e;
  --color-status-importance: #f59e0b;
  --color-error:             #ef4444;
  --color-success:           #22c55e;
  --color-warning:           #f59e0b;
  --color-info:              #3b82f6;

  /* Borders & radius */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Card surfaces */
  --color-bg-card-subtle:   rgba(255, 255, 255, 0.08);
  --color-border-subtle:    rgba(255, 255, 255, 0.12);
  --color-border-separator: rgba(255, 255, 255, 0.08);

  /* Logo filter (white logo on dark bg) */
  --logo-filter: brightness(0) invert(1);

  /* Nav bar */
  --nav-bar-bg:     rgba(10, 10, 10, 0.85);
  --nav-bar-height: 64px;
  --nav-bar-active: #faec52;
  --nav-bar-border: rgba(255, 255, 255, 0.08);

  /* Header */
  --header-bg:      transparent;
  --header-height:  56px;

  /* Fonts (de _fonts.scss) */
  --font-family-primary:   'Syne', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-family-secondary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --font-size-h1: 28px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-body: 16px;
  --font-size-body-small: 14px;
  --font-size-caption: 12px;
  --font-size-overline: 10px;
  --line-height-heading: 110%;
  --line-height-body: 140%;
}

[data-theme="light"] {
  --color-bg:               #f1f1f1;
  --color-bg-gradient:      #f1f1f1;
  --color-bg-gradient-from: #f1f1f1;
  --color-bg-gradient-to:   #f1f1f1;
  --color-bg-card:          #ffffff;
  --color-bg-card-glass:    rgba(255, 255, 255, 0.92);
  --color-bg-input:         #f0f4fb;
  --color-bg-icon-btn:      #1845cd;
  --color-border:           #dde5f0;
  --color-border-input:     rgba(24, 69, 205, 0.35);

  --color-text-primary:   #020515;
  --color-text-secondary: #0a184f;
  --color-text-muted:     rgba(0, 0, 0, 0.45);
  --color-text-inverse:   #020515;

  --color-cta:       #faec52;
  --color-cta-hover: #fff483;
  --color-cta-deep:  #c5b835;

  --color-accent-blue: #1845cd;
  --color-accent-aqua: #0ca596;

  --nav-bar-bg:     #ffffff;
  --nav-bar-active: #1845cd;
  --nav-bar-border: rgba(0, 0, 0, 0.06);

  --header-bg: #ffffff;

  --color-bg-card-subtle:   rgba(0, 0, 0, 0.03);
  --color-border-subtle:    rgba(0, 0, 0, 0.08);
  --color-border-separator: rgba(0, 0, 0, 0.06);

  --logo-filter: brightness(0);
}

/* Base: aplica fondo negro mate, texto y tipografía del sistema al documento */
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
}