/* ==========================================================================
   BotSolutions 2.0 — Design tokens (Dirección C · Hybrid Innovation)
   Fuente de verdad de los valores. Copiar a src/styles/tokens.css.
   Tailwind v4 los expone vía design/tokens/tailwind-theme.css (@theme).
   ========================================================================== */

:root {
  /* ---------- Primitivos: marca (medidos del logo oficial) ---------- */
  --bs-sky-200: #B9E0F5;   /* tope del degradé claro (solo gráfico) */
  --bs-sky-400: #7AC0E8;   /* links y énfasis sobre Night */
  --bs-sky-500: #54AADC;   /* celeste del logo · acento sobre Night */
  --bs-azure-500: #306CAE; /* azul medio del logo (solo gráfico) */
  --bs-azure-600: #0459A0; /* acción/links sobre claro */
  --bs-navy-700: #002A85;  /* navy del logo · títulos sobre claro */
  --bs-pulse-400: #FF5CA8; /* magenta para texto y detalles sobre Night (6.4:1) */
  --bs-pulse-600: #D0136C; /* CTA primario y segundo acento sobre claro (4.9:1 en Paper) */
  --bs-pulse-700: #B00F5B; /* CTA hover */
  --bs-pulse-800: #8E0C4A; /* CTA active */

  /* ---------- Primitivos: neutros ---------- */
  --bs-night-950: #071430; /* fondos oscuros, texto principal en claro */
  --bs-night-900: #0E1E42; /* superficies elevadas en oscuro */
  --bs-night-800: #16295A; /* chips/tags en oscuro, hover de cards */
  --bs-night-700: #1E2E55; /* bordes en oscuro */
  --bs-night-500: #5A6B93; /* borde de inputs en oscuro (3.1:1) */
  --bs-slate-300: #A3AFC8; /* texto secundario en oscuro */
  --bs-gray-0:   #FFFFFF;
  --bs-gray-50:  #F5F7FA;  /* Paper */
  --bs-gray-100: #EEF1F5;  /* fondo deshabilitado / tags claros */
  --bs-gray-200: #E1E5EC;  /* bordes en claro */
  --bs-gray-400: #8A93A6;  /* borde de inputs en claro (3.1:1) */
  --bs-gray-500: #6B7385;  /* placeholder (4.8:1) */
  --bs-gray-600: #5B6577;  /* texto secundario en claro */
  --bs-gray-700: #454C5E;  /* texto de cuerpo en claro */
  --bs-text-on-dark: #F3F4F8;

  /* ---------- Primitivos: estados ---------- */
  --bs-success-600: #0F7A4A; --bs-success-300: #4FD39A;
  --bs-error-600:   #B42318; --bs-error-300:   #FF8A80;
  --bs-warning-600: #9A5B00; --bs-warning-300: #F2B35B;
  --bs-success-bg: #E7F6EE; --bs-error-bg: #FDECEA; --bs-warning-bg: #FFF4E5; --bs-info-bg: #E8F2FB;

  /* ---------- Degradados ---------- */
  --bs-gradient-logo: linear-gradient(180deg, #5BB2E2 0%, #3B81BE 33%, #306CAE 50%, #0459A0 67%, #004494 84%, #002A85 100%);
  --bs-gradient-logo-light: linear-gradient(180deg, #B9E0F5 0%, #54AADC 55%, #2F78BF 100%);
  --bs-gradient-app: linear-gradient(180deg, #72A5D7 0%, #042F83 100%);
  --bs-gradient-brand: linear-gradient(90deg, #54AADC 0%, #7B7FD0 50%, #D0136C 100%);      /* azul → magenta */
  --bs-gradient-brand-text-dark: linear-gradient(90deg, #7AC0E8 0%, #B49BE3 45%, #FF5CA8 100%); /* texto sobre Night */
  --bs-gradient-brand-text-light: linear-gradient(90deg, #0459A0 0%, #6A2E9E 50%, #D0136C 100%); /* texto sobre claro */
  --bs-halo-hero: radial-gradient(45% 80% at 82% 45%, rgb(84 170 220 / 0.20), transparent 70%), radial-gradient(35% 55% at 68% 85%, rgb(208 19 108 / 0.16), transparent 70%);
  --bs-halo-cta: radial-gradient(60% 120% at 20% 0%, rgb(84 170 220 / 0.18), transparent 70%), radial-gradient(50% 110% at 90% 100%, rgb(208 19 108 / 0.20), transparent 70%);
  --bs-halo-section: radial-gradient(40% 60% at 100% 0%, rgb(208 19 108 / 0.14), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgb(84 170 220 / 0.12), transparent 70%);

  /* ---------- Tipografía ---------- */
  --bs-font-display: "Schibsted Grotesk Variable", "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-body: "Hanken Grotesk Variable", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida 360 → 1440 px */
  --bs-text-display: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);    /* 40 → 72 */
  --bs-text-h1:      clamp(2.25rem, 1.833rem + 1.852vw, 3.5rem);   /* 36 → 56 */
  --bs-text-h2:      clamp(1.875rem, 1.583rem + 1.296vw, 2.75rem); /* 30 → 44 */
  --bs-text-h3:      clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem);  /* 22 → 28 */
  --bs-text-h4:      clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18 → 20 */
  --bs-text-lead:    clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18 → 20 */
  --bs-text-body:    clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);   /* 16 → 17 */
  --bs-text-small:   0.875rem;  /* 14 */
  --bs-text-label:   0.75rem;   /* 12 · mono, uppercase */

  --bs-leading-display: 1.02; --bs-leading-heading: 1.1; --bs-leading-h3: 1.2;
  --bs-leading-body: 1.65; --bs-leading-tight: 1.4;
  --bs-tracking-display: -0.04em; --bs-tracking-h1: -0.035em; --bs-tracking-h2: -0.03em;
  --bs-tracking-h3: -0.02em; --bs-tracking-label: 0.12em;

  /* ---------- Espaciado (base 4 px) ---------- */
  --bs-space-1: 0.25rem; --bs-space-2: 0.5rem; --bs-space-3: 0.75rem; --bs-space-4: 1rem;
  --bs-space-5: 1.25rem; --bs-space-6: 1.5rem; --bs-space-8: 2rem; --bs-space-10: 2.5rem;
  --bs-space-12: 3rem; --bs-space-16: 4rem; --bs-space-20: 5rem; --bs-space-24: 6rem; --bs-space-32: 8rem;
  --bs-section-y: clamp(4rem, 2.667rem + 5.926vw, 8rem);  /* 64 → 128 */
  --bs-section-y-tight: clamp(3rem, 2.333rem + 2.963vw, 5rem); /* 48 → 80 */
  --bs-stack-heading: clamp(2rem, 1.667rem + 1.481vw, 3rem); /* encabezado de sección → contenido: 32 → 48 */

  /* ---------- Layout ---------- */
  --bs-container: 80rem;           /* 1280 px de contenido */
  --bs-container-narrow: 48rem;    /* 768 px para texto largo */
  --bs-gutter: 1rem;               /* 360–389 */
  --bs-grid-gap: 1rem;
  --bs-header-h: 4rem;             /* 64 mobile */

  /* ---------- Radios ---------- */
  --bs-radius-sm: 6px; --bs-radius-md: 10px; --bs-radius-lg: 14px;
  --bs-radius-xl: 20px; --bs-radius-2xl: 32px; --bs-radius-full: 9999px;

  /* ---------- Sombras ---------- */
  --bs-shadow-card: 0 1px 2px rgb(7 20 48 / 0.06), 0 8px 24px rgb(7 20 48 / 0.06);
  --bs-shadow-card-hover: 0 2px 4px rgb(7 20 48 / 0.08), 0 16px 40px rgb(7 20 48 / 0.12);
  --bs-shadow-float: 0 24px 48px rgb(7 20 48 / 0.16);
  --bs-shadow-dark-card: 0 0 0 1px var(--bs-night-700), 0 20px 60px rgb(84 170 220 / 0.10);

  /* ---------- Movimiento ---------- */
  --bs-dur-fast: 150ms; --bs-dur-base: 240ms; --bs-dur-slow: 480ms; --bs-dur-reveal: 640ms;
  --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Capas ---------- */
  --bs-z-header: 50; --bs-z-menu: 60; --bs-z-toast: 70; --bs-z-skip: 80;
}

@media (min-width: 390px)  { :root { --bs-gutter: 1.25rem; } }
@media (min-width: 768px)  { :root { --bs-gutter: 2rem;   --bs-grid-gap: 1.25rem; } }
@media (min-width: 1024px) { :root { --bs-gutter: 2.5rem; --bs-grid-gap: 1.5rem; --bs-header-h: 4.5rem; } }

/* ==========================================================================
   Superficies semánticas. Cada <section> declara data-surface.
   Los componentes SOLO usan estos tokens, nunca primitivos.
   ========================================================================== */
:root,
[data-surface="paper"] {
  --surface: var(--bs-gray-50);
  --surface-raised: var(--bs-gray-0);
  --surface-sunken: var(--bs-gray-100);
  --text: var(--bs-night-950);
  --text-heading: var(--bs-navy-700);
  --text-body: var(--bs-gray-700);
  --text-muted: var(--bs-gray-600);
  --text-placeholder: var(--bs-gray-500);
  --border: var(--bs-gray-200);
  --border-input: var(--bs-gray-400);
  --link: var(--bs-azure-600);
  --link-hover: var(--bs-navy-700);
  --accent: var(--bs-azure-600);
  --label: var(--bs-azure-600);
  --tag-bg: #EAF2FA;
  --tag-text: var(--bs-azure-600);
  --focus: var(--bs-azure-600);
  --success: var(--bs-success-600); --error: var(--bs-error-600); --warning: var(--bs-warning-600);
  --accent-text: var(--bs-azure-600);
  --accent-2: var(--bs-pulse-600);
  --gradient-text: var(--bs-gradient-brand-text-light);
  --card-shadow: var(--bs-shadow-card);
  --card-shadow-hover: var(--bs-shadow-card-hover);
  --card-hover-bg: var(--surface-raised);
  --result-bg: var(--bs-info-bg); --result-text: var(--bs-night-950); --result-label: var(--bs-azure-600);
  --rule-accent: var(--bs-azure-600);
  --logo: url("/assets/brand/logo-horizontal-color.svg");
  color-scheme: light;
}
[data-surface="white"] {
  --surface: var(--bs-gray-0);
  --surface-raised: var(--bs-gray-0);
}
[data-surface="night"] {
  --surface: var(--bs-night-950);
  --surface-raised: var(--bs-night-900);
  --surface-sunken: #050E24;
  --text: var(--bs-text-on-dark);
  --text-heading: var(--bs-text-on-dark);
  --text-body: var(--bs-slate-300);
  --text-muted: var(--bs-slate-300);
  --text-placeholder: #8592AE;
  --border: var(--bs-night-700);
  --border-input: var(--bs-night-500);
  --link: var(--bs-sky-400);
  --link-hover: var(--bs-text-on-dark);
  --accent: var(--bs-sky-500);
  --label: var(--bs-sky-500);
  --tag-bg: var(--bs-night-800);
  --tag-text: #9CCBEB;
  --focus: var(--bs-sky-500);
  --success: var(--bs-success-300); --error: var(--bs-error-300); --warning: var(--bs-warning-300);
  --accent-text: var(--bs-sky-400);
  --accent-2: var(--bs-pulse-400);
  --gradient-text: var(--bs-gradient-brand-text-dark);
  --card-shadow: none;
  --card-shadow-hover: var(--bs-shadow-dark-card);
  --card-hover-bg: var(--bs-night-800);
  --result-bg: rgb(84 170 220 / 0.10); --result-text: var(--bs-text-on-dark); --result-label: var(--bs-sky-500);
  --rule-accent: var(--bs-sky-500);
  --logo: url("/assets/brand/logo-horizontal-on-dark.svg");
  color-scheme: dark;
}

/* ==========================================================================
   Modo oscuro (html[data-theme="dark"]). Lo fija el script del <head>:
   preferencia guardada ('bs-theme') o, si no hay, la del sistema.
   Paper y White pasan a azules muy oscuros; Night queda igual y se distingue
   por ser un poco más profundo. Mismos tokens semánticos que Night.
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] [data-surface="paper"],
html[data-theme="dark"] [data-surface="white"] {
  --surface: #0A1838;
  --surface-raised: #102149;
  --surface-sunken: #08132E;
  --text: var(--bs-text-on-dark);
  --text-heading: var(--bs-text-on-dark);
  --text-body: #B8C2D8;
  --text-muted: var(--bs-slate-300);
  --text-placeholder: #8592AE;
  --border: #22345F;
  --border-input: var(--bs-night-500);
  --link: var(--bs-sky-400);
  --link-hover: var(--bs-text-on-dark);
  --accent: var(--bs-sky-500);
  --label: var(--bs-sky-500);
  --tag-bg: var(--bs-night-800);
  --tag-text: #9CCBEB;
  --focus: var(--bs-sky-500);
  --success: var(--bs-success-300); --error: var(--bs-error-300); --warning: var(--bs-warning-300);
  --accent-text: var(--bs-sky-400);
  --accent-2: var(--bs-pulse-400);
  --gradient-text: var(--bs-gradient-brand-text-dark);
  --card-shadow: 0 0 0 1px #1B2C55;
  --card-shadow-hover: var(--bs-shadow-dark-card);
  --card-hover-bg: #142753;
  --result-bg: rgb(84 170 220 / 0.10); --result-text: var(--bs-text-on-dark); --result-label: var(--bs-sky-500);
  --rule-accent: var(--bs-sky-500);
  --logo: url("/assets/brand/logo-horizontal-on-dark.svg");
  color-scheme: dark;
}
html[data-theme="dark"] [data-surface="white"] { --surface: #0D1C40; }