/* ── Tokens de tema para los componentes mb-* ───────────────────────────────
   Oscuro en :root (el sitio arranca en dark), claro en [data-bs-theme=light].
   Los componentes mb-* solo consumen estos tokens: ni literales de color ni
   !important. Cada raíz de componente lleva .mb-island, que la saca de las
   reglas genéricas de light-mode-override.css. Un componente sin variante
   clara añade .mb-island--dark. Ver docs/mb-tokens.md. ── */

:root {
  /* acento de página: rojo del tema; .mb-blue lo pone en cian */
  --mb-accent: var(--accent-color, #c73b35);
  --mb-accent-rgb: 199, 59, 53;
  --mb-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* superficies */
  --mb-surface: #0b0b0c;      /* panel, ventana, registro; también los knockouts */
  --mb-surface-2: #121214;    /* hundido: código, diff, barra */
  --mb-surface-3: #1a1a1e;    /* elevado: items del móvil, tiles, caras del cubo */
  --mb-card: #0a0a0a;         /* tarjeta con degradados */
  --mb-card-tint-1: rgba(21, 57, 154, .26);   /* azul del template, esquina superior */
  --mb-card-tint-2: rgba(169, 62, 23, .26);   /* rojo del template, esquina inferior */
  --mb-canvas: #060606;       /* lienzo del mapa de camino */
  --mb-bezel: #060606;        /* notch del móvil: más oscuro que su carcasa en los dos temas */

  /* tintas */
  --mb-ink: #ffffff;
  --mb-ink-2: #d9dbe3;
  --mb-ink-3: #a7aabb;        /* párrafo */
  --mb-ink-4: #9a9da9;        /* mute, etiquetas mono */
  --mb-ink-5: #6f7280;        /* apagado */
  --mb-ink-rgb: 255, 255, 255;

  /* líneas y rellenos: alpha de la tinta sobre la superficie */
  --mb-line-rgb: 255, 255, 255;
  --mb-hairline: rgba(var(--mb-line-rgb), .08);
  --mb-line: rgba(var(--mb-line-rgb), .14);
  --mb-line-strong: rgba(var(--mb-line-rgb), .25);
  --mb-frame: rgba(var(--mb-line-rgb), .35);   /* esquinas, corchetes, trazos SVG */
  --mb-fill-1: rgba(var(--mb-line-rgb), .03);
  --mb-fill-2: rgba(var(--mb-line-rgb), .08);
  --mb-fill-3: rgba(var(--mb-line-rgb), .15);

  /* botón "inverso": blanco sobre oscuro, negro sobre claro */
  --mb-inverse: #ffffff;
  --mb-inverse-ink: #0a0a0a;

  /* estado */
  --mb-red: #ff4a3d;   --mb-red-soft: #ff8f86;   --mb-red-rgb: 255, 74, 61;
  --mb-green: #39d98a; --mb-green-soft: #a9f0c9; --mb-green-rgb: 57, 217, 138;
  --mb-cyan: #0ad5ff;  --mb-cyan-soft: #bfeeff;  --mb-cyan-rgb: 10, 213, 255;

  /* sombras y logos */
  --mb-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
  --mb-shadow-flat: rgba(255, 255, 255, .05);   /* sombras planas "6px 6px 0" */
  --mb-logo-filter: brightness(0) invert(1);    /* logos monocromos sobre la superficie */
}

[data-bs-theme=light] {
  --mb-surface: #ffffff;
  --mb-surface-2: #f3f3f5;
  --mb-surface-3: #e8e8ed;
  --mb-card: #f6f6f8;
  --mb-card-tint-1: rgba(21, 57, 154, .1);
  --mb-card-tint-2: rgba(169, 62, 23, .1);
  --mb-canvas: #f3f3f5;
  --mb-bezel: #d8d8de;

  --mb-ink: #111111;
  --mb-ink-2: #333333;
  --mb-ink-3: #555555;
  --mb-ink-4: #6b6e7b;
  --mb-ink-5: #85889a;
  --mb-ink-rgb: 17, 17, 17;

  --mb-line-rgb: 0, 0, 0;
  --mb-line: rgba(var(--mb-line-rgb), .12);
  --mb-fill-2: rgba(var(--mb-line-rgb), .06);
  --mb-fill-3: rgba(var(--mb-line-rgb), .1);

  --mb-inverse: #111111;
  --mb-inverse-ink: #ffffff;

  --mb-red: #c8321f;   --mb-red-soft: #a3261a;   --mb-red-rgb: 200, 50, 31;
  --mb-green: #1f8f4e; --mb-green-soft: #156b3a; --mb-green-rgb: 31, 143, 78;
  --mb-cyan: #087a99;  --mb-cyan-soft: #0b5f78;  --mb-cyan-rgb: 8, 122, 153;

  --mb-shadow: 0 20px 50px -30px rgba(0, 0, 0, .25);
  --mb-shadow-flat: rgba(0, 0, 0, .08);
  --mb-logo-filter: brightness(0);
}

/* acento cian de las páginas blue team; en claro, el mismo azul que .btn-blue */
.mb-blue { --mb-accent: #0ad5ff; --mb-accent-rgb: 10, 213, 255; }
[data-bs-theme=light] .mb-blue { --mb-accent: #0099cc; --mb-accent-rgb: 0, 153, 204; }

/* isla siempre oscura: redefine todos los tokens con los valores dark, también
   los derivados (los var() se resuelven en :root, no se heredan sin resolver) */
.mb-island--dark {
  --mb-surface: #0b0b0c; --mb-surface-2: #121214; --mb-surface-3: #1a1a1e; --mb-card: #0a0a0a; --mb-canvas: #060606; --mb-bezel: #060606;
  --mb-ink: #ffffff; --mb-ink-2: #d9dbe3; --mb-ink-3: #a7aabb; --mb-ink-4: #9a9da9; --mb-ink-5: #6f7280; --mb-ink-rgb: 255, 255, 255;
  --mb-line-rgb: 255, 255, 255;
  --mb-hairline: rgba(255, 255, 255, .08); --mb-line: rgba(255, 255, 255, .14); --mb-line-strong: rgba(255, 255, 255, .25); --mb-frame: rgba(255, 255, 255, .35);
  --mb-fill-1: rgba(255, 255, 255, .03); --mb-fill-2: rgba(255, 255, 255, .08); --mb-fill-3: rgba(255, 255, 255, .15);
  --mb-inverse: #ffffff; --mb-inverse-ink: #0a0a0a;
  --mb-red: #ff4a3d; --mb-red-soft: #ff8f86; --mb-red-rgb: 255, 74, 61;
  --mb-green: #39d98a; --mb-green-soft: #a9f0c9; --mb-green-rgb: 57, 217, 138;
  --mb-cyan: #0ad5ff; --mb-cyan-soft: #bfeeff; --mb-cyan-rgb: 10, 213, 255;
  --mb-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9); --mb-shadow-flat: rgba(255, 255, 255, .05); --mb-logo-filter: brightness(0) invert(1);
}