/**
 * Design tokens — Academia El Profe / Manual de Identidad Visual
 * Capa 1: colores de sistema · Capa 2: colores de entidad
 * Grid base: 8px · Tipografía: Inter + JetBrains Mono
 */

:root {
  /* ── Tipografía ─────────────────────────────────────────────── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  /* ── Espaciado (grid 8px) ───────────────────────────────────── */
  --space-unit: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-node: 32px;
  --space-cluster: 48px;

  /* ── Radios y trazos ─────────────────────────────────────────── */
  --radius-card: 8px;
  --radius-badge: 4px;
  --radius-corner: 6px;
  --stroke-icon: 1.5px;
  --stroke-flow: 1.5px;
  --border-entity: 4px;

  /* ── Capa 1: colores de sistema (modo claro) ─────────────────── */
  --color-bg: #ffffff;
  --color-surface: #f6f8fa;
  --color-border: #d0d7de;
  --color-text-primary: #1b1f24;
  --color-text-secondary: #57606a;
  --color-warning: #9a6700;
  --color-success: #1a7f37;
  --color-error: #cf222e;
  --color-accent: #0969da;

  /* ── Capa 2: colores de entidad ──────────────────────────────── */
  --entity-internet: #0b6e99;
  --entity-cloudflare: #f38020;
  --entity-aws: #b7791f;
  --entity-firebase: #d97706;
  --entity-github: #24292f;
  --entity-dns: #2563eb;
  --entity-database: #6d28d9;
  --entity-users: #0e7490;
  --entity-api: #15803d;
  --entity-security: #b91c1c;
  --entity-ia: #4f46e5;

  /* ── Portal switcher (tema claro) ────────────────────────────── */
  --portal-bar-bg: var(--color-surface);
  --portal-bar-border: var(--color-border);
  --portal-bar-text: var(--color-text-secondary);
  --portal-bar-active-bg: var(--color-bg);
  --portal-bar-active-text: var(--color-text-primary);
  --portal-bar-hover-bg: var(--color-surface);
}

[data-md-color-scheme="slate"] {
  /* ── Capa 1: colores de sistema (modo oscuro) ────────────────── */
  --color-bg: #0b0e14;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-warning: #d29922;
  --color-success: #3fb950;
  --color-error: #f85149;
  --color-accent: #58a6ff;

  /* ── Portal switcher (tema oscuro) ───────────────────────────── */
  --portal-bar-bg: var(--color-surface);
  --portal-bar-border: var(--color-border);
  --portal-bar-text: var(--color-text-secondary);
  --portal-bar-active-bg: var(--color-bg);
  --portal-bar-active-text: var(--color-text-primary);
  --portal-bar-hover-bg: var(--color-surface);
}