/* be1play · sistema de tokens v1 (octubre 2026)
   Fuente: assets/be1play/brand-kit · Guia de identidad be1play v1.
   Capa base compartida por el shell, el hub y las superficies del backend.

   Convencion:
   - `--b1-*` son los nombres estables del kit.
   - Los alias heredados (`--bg`, `--line`, `--accent`...) mapan los tokens a los
     nombres que ya usan las hojas de estilo del proyecto, de modo que la
     migracion no obliga a reescribirlas enteras.

   Tema: se elige con `data-theme` (superficies web) o `data-skin` (shell). */

:root,
html[data-theme="light"],
html[data-skin="light"] {
  color-scheme: light;

  /* Superficies del tema claro */
  --b1-bg: #f5f8ff;
  --b1-surface: #ffffff;
  --b1-surface-raised: #edf4ff;
  --b1-border: #dde6f5;
  --b1-text: #101b39;
  --b1-text-muted: #475676;
  --b1-action: #075eca;
  --b1-focus: #4c3eff;
  --b1-shadow: 0 12px 40px rgba(15, 35, 95, 0.09);

  /* Alias heredados */
  --bg: var(--b1-bg);
  --bg-soft: var(--b1-bg);
  --bg-elevated: var(--b1-surface);
  --bg-card: var(--b1-surface);
  --bg-sunken: var(--b1-bg);
  --surface: var(--b1-surface);
  --surface-2: var(--b1-surface-raised);
  --line: var(--b1-border);
  --line-soft: var(--b1-border);
  --text: var(--b1-text);
  --muted: var(--b1-text-muted);
  --accent: var(--b1-action);
  --accent-soft: rgba(7, 94, 202, 0.12);
  --accent-ink: var(--b1-action);
  --on-accent: #ffffff;
  --scrim: rgba(16, 27, 57, 0.42);
  --danger: #c2353a;
  --warning: #8a6100;
  --info: #075eca;
}

html[data-theme="dark"],
html[data-skin="dark"] {
  color-scheme: dark;

  /* Superficies del tema oscuro */
  --b1-bg: #030b1f;
  --b1-surface: #07132d;
  --b1-surface-raised: #111d3b;
  --b1-border: #263a60;
  --b1-text: #ffffff;
  --b1-text-muted: #b5c9e8;
  --b1-action: #06dcf2;
  --b1-focus: #ffe16e;
  --b1-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);

  --bg: var(--b1-bg);
  --bg-soft: var(--b1-bg);
  --bg-elevated: var(--b1-surface);
  --bg-card: var(--b1-surface);
  --bg-sunken: var(--b1-bg);
  --surface: var(--b1-surface);
  --surface-2: var(--b1-surface-raised);
  --line: var(--b1-border);
  --line-soft: var(--b1-border);
  --text: var(--b1-text);
  --muted: var(--b1-text-muted);
  --accent: var(--b1-action);
  --accent-soft: rgba(6, 220, 242, 0.14);
  --accent-ink: var(--b1-action);
  --on-accent: #07132d;
  --scrim: rgba(3, 11, 31, 0.62);
  --danger: #ff7762;
  --warning: #ffc83f;
  --info: #06dcf2;
}

:root {
  /* Paleta de marca */
  --b1-ink: #101b39;
  --b1-night: #07132d;
  --b1-night-deep: #030b1f;
  --b1-night-card: #111d3b;
  --b1-night-border: #263a60;
  --b1-paper: #f5f8ff;
  --b1-white: #ffffff;
  --b1-cyan: #06dcf2;
  --b1-blue: #237bfa;
  --b1-violet: #8b4bff;
  --b1-magenta: #f633b7;
  --b1-coral: #ff7762;
  --b1-sun: #ffc83f;
  --b1-lime: #adfa40;
  --b1-teal: #13cdb9;

  /* Gradiente de marca: orienta y motiva, nunca sustituye al texto */
  --b1-brand-gradient: linear-gradient(
    110deg,
    #06dcf2 0%,
    #237bfa 28%,
    #8b4bff 55%,
    #f633b7 77%,
    #ff7762 100%
  );

  /* Espaciado */
  --b1-space-1: 4px;
  --b1-space-2: 8px;
  --b1-space-3: 12px;
  --b1-space-4: 16px;
  --b1-space-5: 24px;
  --b1-space-6: 32px;
  --b1-space-7: 48px;
  --b1-space-8: 64px;

  /* Radios */
  --b1-radius-sm: 8px;
  --b1-radius-md: 14px;
  --b1-radius-lg: 22px;
  --b1-radius-xl: 30px;
  --b1-radius-pill: 999px;

  /* Alias de radios heredados */
  --radius-sm: var(--b1-radius-sm);
  --radius: var(--b1-radius-md);
  --radius-lg: var(--b1-radius-lg);

  /* Tipografia */
  --b1-font: "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --b1-type-caption: 12px;
  --b1-type-label: 14px;
  --b1-type-body: 16px;
  --b1-type-subtitle: 20px;
  --b1-type-h3: 24px;
  --b1-type-h2: 32px;
  --b1-type-h1: 48px;
  --b1-type-hero: 64px;

  /* Objetivos tactiles: 44 minimo, 48 recomendado */
  --b1-touch-min: 44px;
  --b1-touch-comfort: 48px;

  /* Movimiento */
  --b1-micro-ms: 160ms;
  --b1-transition-ms: 240ms;

  --b1-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Poppins autoalojada: el shell funciona sin red. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/poppins-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/poppins-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/poppins-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/poppins-latin-700.woff2") format("woff2");
}

/* Componentes base compartidos */
.b1-button {
  min-height: var(--b1-touch-comfort);
  padding: 12px 22px;
  border: 0;
  border-radius: var(--b1-radius-pill);
  font: 600 14px var(--b1-font);
  cursor: pointer;
}

.b1-button-primary {
  background: var(--b1-brand-gradient);
  color: #07132d;
}

.b1-button-secondary {
  color: var(--b1-text);
  background: var(--b1-surface-raised);
  border: 1px solid var(--b1-border);
}

.b1-card {
  border: 1px solid var(--b1-border);
  border-radius: var(--b1-radius-lg);
  background: var(--b1-surface);
  box-shadow: var(--b1-shadow);
}

/* Foco visible: mismo tratamiento en todas las superficies */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--b1-focus);
  outline-offset: 3px;
  border-radius: var(--b1-radius-sm);
}

/* Movimiento reducido: el sistema lo respeta de forma global */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}