/* ============================================================
   Nina — Design Tokens
   Paleta: Warm Tech Clinical
   ============================================================ */

:root {
  /* ── 60% Neutros cálidos ── */
  --color-bg:               #edeff3;
  --color-surface:          #ffffff;
  --color-surface-elevated: #FFFFFF;
  --color-border:           #D9D5D1;
  --color-divider:          #E3DFDB;

  /* ── 30% Primary (Tech Blue) ── */
  --color-primary:          #3E5FE6;
  --color-primary-hover:    #3253D4;
  --color-primary-active:   #2747C2;
  --color-primary-soft:     #EAEDFF;

  /* ── 10% Accent (Deep Blue) ── */
  --color-accent:           #2A42C8;
  --color-accent-hover:     #2036BA;
  --color-accent-soft:      #E8EBFC;
  --color-accent-strong:    #1A2CA8;

  /* ── Estados ── */
  --color-success:          #3FB68B;
  --color-success-soft:     #E8F7F1;
  --color-accent-success:   #2ECC8F;
  --color-warning:          #E6A23C;
  --color-warning-soft:     #FFF4E2;
  --color-error:            #D9534F;
  --color-error-soft:       #FCEAEA;
  --color-info:             #5FA8D3;
  --color-info-soft:        #EAF5FB;

  /* ── Texto ── */
  --color-text:             #1F2933;
  --color-text-muted:       #5B6570;
  --color-text-soft:        #7A838C;
  --color-text-on-primary:  #FFFFFF;
  --color-text-on-accent:   #FFFFFF;


  /* ── Tipografía ── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ── Espaciado (múltiplos de 4px) ── */
  --space-1:    0.25rem;
  --space-1-5:  0.375rem;
  --space-2:    0.5rem;
  --space-2-5:  0.625rem;
  --space-3:    0.75rem;
  --space-3-5:  0.875rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-9:    2.25rem;
  --space-10:   2.5rem;
  --space-12:   3rem;

  /* ── Bordes ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Sombras (tintadas con Signal Blue — no negro puro) ── */
  --shadow-sm:  0 1px 2px rgba(30, 44, 168, 0.06), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md:  0 4px 8px rgba(30, 44, 168, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 8px 20px rgba(30, 44, 168, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 16px 32px rgba(30, 44, 168, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* ── Breakpoints (referencia para JS) ── */
  --bp-xs:  320px;   /* iPhone SE, Android económico */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ── Sidebar ── */
  --sidebar-width:       240px;
  --sidebar-width-icon:  58px;

  /* ── Transiciones ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Glass System ── */
  --glass-bg:              rgba(255, 255, 255, 0.5);
  --glass-border:          rgba(255, 255, 255, 0.60);
  --glass-blur:            16px;
  --glass-shadow:          0 8px 32px rgba(62, 95, 230, 0.10),
                           0 1px 0 rgba(255, 255, 255, 0.80) inset;
  --glass-shadow-hover:    0 12px 40px rgba(62, 95, 230, 0.16),
                           0 1px 0 rgba(255, 255, 255, 0.80) inset;

  /* ── Card System ── */
  --card-radius:           var(--radius-xl); /* 16px — todas las cards principales */

  /* Glass tinted — primary */
  --glass-primary-bg:      rgba(62, 95, 230, 0.12);
  --glass-primary-border:  rgba(62, 95, 230, 0.30);

  /* Glass tinted — white */
  --glass-white-bg:       rgba(225, 228, 242, 0.1);
  --glass-white-border:   rgba(225, 228, 242, 0.28);

  /* Glass tinted — accent */
  --glass-accent-bg:       rgba(61, 92, 232, 0.10);
  --glass-accent-border:   rgba(61, 92, 232, 0.28);

  /* Glass tinted — secondary (neutral) */
  --glass-secondary-bg:    rgba(255, 255, 255, 0.22);
  --glass-secondary-border: rgba(0, 0, 0, 0.08);

  /* Glass tinted — danger */
  --glass-danger-bg:       rgba(217, 83, 79, 0.10);
  --glass-danger-border:   rgba(217, 83, 79, 0.28);

  /* Wave background — 3 capas, opacidad progresiva */
  --wave-back-color:       rgba(62, 95, 230, 0.13);  /* trasera: suave, tenue */
  --wave-mid-color:        rgba(62, 95, 230, 0.21);  /* media: intermedia */
  --wave-front-color:      rgba(62, 95, 230, 0.32);  /* delantera: pronunciada */
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-bg:               #0f141c;
  --color-surface:          #20252C;
  --color-surface-elevated: #262C34;
  --color-border:           #343B45;
  --color-divider:          #2C333C;

  --color-primary:          #5F81F0;
  --color-primary-hover:    #536FE6;
  --color-primary-active:   #475FDA;
  --color-primary-soft:     rgba(95, 129, 240, 0.14);

  --color-accent:           #4A66E0;
  --color-accent-hover:     #3E5AD4;
  --color-accent-soft:      rgba(74, 102, 224, 0.16);
  --color-accent-strong:    #7B9AFF;

  --color-success:          #56C49C;
  --color-success-soft:     rgba(86, 196, 156, 0.14);
  --color-warning:          #F0B252;
  --color-warning-soft:     rgba(240, 178, 82, 0.14);
  --color-error:            #E16A67;
  --color-error-soft:       rgba(225, 106, 103, 0.14);
  --color-info:             #78B8DE;
  --color-info-soft:        rgba(120, 184, 222, 0.14);

  --color-text:             #F5F7FA;
  --color-text-muted:       #C3CBD4;
  --color-text-soft:        #95A0AB;
  --color-text-on-primary:  #FFFFFF;
  --color-text-on-accent:   #FFFFFF;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.22);
  --shadow-lg:  0 8px 20px rgba(0, 0, 0, 0.28);
  --shadow-xl:  0 16px 32px rgba(0, 0, 0, 0.32);

  /* Glass System — dark */
  --glass-bg:              rgba(21, 27, 48, 0.6);
  --glass-border:          rgba(255, 255, 255, 0.08);
  --glass-shadow:          0 8px 32px rgba(0, 0, 0, 0.30);

  --glass-primary-bg:      rgba(95, 129, 240, 0.14);
  --glass-primary-border:  rgba(95, 129, 240, 0.25);

  --glass-accent-bg:       rgba(74, 102, 224, 0.14);
  --glass-accent-border:   rgba(74, 102, 224, 0.28);

  --glass-secondary-bg:    rgba(255, 255, 255, 0.07);
  --glass-secondary-border: rgba(255, 255, 255, 0.10);

  --glass-danger-bg:       rgba(225, 106, 103, 0.13);
  --glass-danger-border:   rgba(225, 106, 103, 0.28);

  --wave-back-color:       rgba(95, 129, 240, 0.12);
  --wave-mid-color:        rgba(95, 129, 240, 0.20);
  --wave-front-color:      rgba(95, 129, 240, 0.30);
}

/* ── Reset base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

/* ── Icon SVG ── */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}