/* =============================================================
   DESIGN TOKENS — Fuente única de verdad de la identidad visual.
   Cambia la marca completa editando SOLO las variables de esta capa.
   Identidad: "¿De Aquí a Dónde?" — luminosa, gradiente de marca,
   glassmorphism medido, tarjetas redondeadas. (Ref: pitch deck)
   ============================================================= */

:root {
  /* ---- 1. Primitivos de marca (gradiente índigo→magenta→naranja) ---- */
  --brand-indigo:  #4E31D6;
  --brand-violet:  #7A3BEF;
  --brand-magenta: #EC2B7A;
  --brand-orange:  #FF7A1A;
  --brand-primary: #6D3BEF;   /* violeta sólido — acción principal */
  --brand-primary-strong: #5A2ADf;
  --gradient-brand: linear-gradient(100deg,
    var(--brand-indigo) 0%, var(--brand-violet) 34%,
    var(--brand-magenta) 68%, var(--brand-orange) 100%);
  --gradient-brand-soft: linear-gradient(100deg,
    color-mix(in srgb, var(--brand-indigo) 12%, transparent),
    color-mix(in srgb, var(--brand-magenta) 12%, transparent) 60%,
    color-mix(in srgb, var(--brand-orange) 12%, transparent));

  /* ---- 2. Neutros (sesgo índigo — elegidos, no gris puro) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFAFC;
  --neutral-50:  #F4F2F8;
  --neutral-100: #ECE9F3;
  --neutral-200: #E0DCEC;
  --neutral-300: #CBC6DC;
  --neutral-400: #A29CB8;
  --neutral-500: #7B7690;
  --neutral-600: #5B566E;
  --neutral-700: #423E54;
  --neutral-800: #2A2740;
  --neutral-900: #17132B;
  --neutral-950: #0E0B1A;

  /* ---- 3. Semántica de estado (independiente del acento) ---- */
  --color-success: #1F9254;  --color-success-bg: #E6F5EC;
  --color-warning: #B58100;  --color-warning-bg: #FBF3DC;
  --color-danger:  #E5484D;  --color-danger-bg:  #FDECEC;
  --color-info:    #3A6FF0;  --color-info-bg:    #E8EFFE;

  /* ---- 4. Alias semánticos (lo que consumen los componentes) ---- */
  --bg:            #F4EFE6;
  --bg-subtle:     #EFE8DB;
  --surface:       #FFFFFF;
  --surface-2:     #FAF6EE;
  --surface-inset: #EFE8DB;
  --text:          #1B1540;
  --text-2:        #57506E;
  --text-muted:    #8A8498;
  --text-on-brand: #FFFFFF;
  --border:        #E8E0D1;
  --border-strong: #DAD0BE;
  --ring:          color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --accent:        var(--brand-primary);
  --accent-text:   var(--brand-primary-strong);

  /* Glassmorphism (crema translúcido) */
  --glass-bg:     color-mix(in srgb, #FBF8F2 72%, transparent);
  --glass-border: color-mix(in srgb, #FFFFFF 55%, transparent);
  --glass-blur:   14px;

  /* ---- 5. Tipografía ---- */
  /* Display rounded (se auto-hospeda Poppins en assets/fonts; fallback system) */
  --font-display: "Poppins", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.875rem;    /* 14 */
  --fs-md:  1rem;        /* 16 base */
  --fs-lg:  1.125rem;    /* 18 */
  --fs-xl:  1.375rem;    /* 22 */
  --fs-2xl: clamp(1.5rem, 1.1rem + 1.8vw, 1.875rem);
  --fs-3xl: clamp(1.875rem, 1.3rem + 2.6vw, 2.5rem);
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.8vw, 3.25rem);

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800;
  --lh-tight: 1.12; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.7;
  --ls-tight: -0.02em; --ls-tighter: -0.035em; --ls-wide: 0.02em; --ls-widest: 0.14em;

  /* ---- 6. Espaciado (escala 4/8pt) ---- */
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem;
  --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --space-11: 8rem;

  /* ---- 7. Radios (marca muy redondeada) ---- */
  --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px;
  --radius-lg: 24px; --radius-xl: 30px; --radius-pill: 999px; --radius-circle: 50%;

  /* ---- 8. Elevación ---- */
  --shadow-xs: 0 1px 2px rgba(23,19,43,.06);
  --shadow-sm: 0 1px 2px rgba(23,19,43,.06), 0 2px 6px -2px rgba(23,19,43,.10);
  --shadow-md: 0 2px 4px rgba(23,19,43,.05), 0 10px 24px -8px rgba(23,19,43,.16);
  --shadow-lg: 0 2px 6px rgba(23,19,43,.06), 0 28px 56px -20px rgba(23,19,43,.26);
  --shadow-brand: 0 8px 24px -8px color-mix(in srgb, var(--brand-primary) 45%, transparent);

  /* ---- 9. Movimiento ---- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* ---- 10. Capas z ---- */
  --z-base: 1; --z-sticky: 100; --z-dropdown: 300; --z-overlay: 800;
  --z-modal: 900; --z-toast: 1000; --z-cursor: 9999;

  /* ---- 11. Layout ---- */
  --container: 1200px; --container-narrow: 760px;
  --header-h: 64px; --sidebar-w: 264px; --sidebar-collapsed: 72px;
  --tap-min: 44px;   /* objetivo táctil mínimo WCAG 2.2 */
}

/* ============ Tema oscuro ============ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--neutral-950); --bg-subtle: #14112A;
    --surface: #171430; --surface-2: #1E1A38; --surface-inset: #241F42;
    --text: var(--neutral-25); --text-2: var(--neutral-300); --text-muted: var(--neutral-400);
    --border: #2C2749; --border-strong: #3A3459;
    --color-success-bg: #12301F; --color-warning-bg: #332A10;
    --color-danger-bg: #3A1A1D; --color-info-bg: #16233F;
    --glass-bg: color-mix(in srgb, #171430 60%, transparent);
    --glass-border: color-mix(in srgb, #FFFFFF 12%, transparent);
    --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 28px 56px -20px rgba(0,0,0,.7);
  }
}
/* Override explícito por toggle (gana sobre el media query en ambos sentidos) */
:root[data-theme="light"] {
  --bg:#F4EFE6; --bg-subtle:#EFE8DB;
  --surface:#FFFFFF; --surface-2:#FAF6EE; --surface-inset:#EFE8DB;
  --text:#1B1540; --text-2:#57506E; --text-muted:#8A8498;
  --border:#E8E0D1; --border-strong:#DAD0BE;
  --color-success-bg:#E4F3E9; --color-warning-bg:#F7EFD8; --color-danger-bg:#FCE9E7; --color-info-bg:#E7ECFB;
  --glass-bg: color-mix(in srgb, #FBF8F2 72%, transparent);
  --glass-border: color-mix(in srgb, #FFFFFF 55%, transparent);
}
:root[data-theme="dark"] {
  --bg: var(--neutral-950); --bg-subtle:#14112A;
  --surface:#171430; --surface-2:#1E1A38; --surface-inset:#241F42;
  --text: var(--neutral-25); --text-2: var(--neutral-300); --text-muted: var(--neutral-400);
  --border:#2C2749; --border-strong:#3A3459;
  --color-success-bg:#12301F; --color-warning-bg:#332A10; --color-danger-bg:#3A1A1D; --color-info-bg:#16233F;
  --glass-bg: color-mix(in srgb, #171430 60%, transparent);
  --glass-border: color-mix(in srgb, #FFFFFF 12%, transparent);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 28px 56px -20px rgba(0,0,0,.7);
}