/* ============================================================
   IDENTIDAD VISUAL — dashboard tipo bento: fondo violeta claro,
   tarjetas blancas de esquinas muy redondeadas, contenedores
   oscuros como acento y naranja como color de marca.

   Única identidad de la plataforma (ver contract.css): no hay
   selector de tema, así que estos tokens viven directo en :root.
   Lo que SÍ varía es el MODO claro/oscuro — [data-mode='dark']
   más abajo — porque esa es una preferencia de la persona, no de
   marca.

   ─── Identidad ───
   Nace de un mock de dashboard bento (violeta #D8D8F6 + panel
   oscuro #1E1E24 + naranja #FF9F68 + celeste). Esquinas grandes,
   sombras difusas, sin bisel duro.

   Modo CLARO es la base (es como se pensó el bento); el modo
   oscuro invierte las superficies pero conserva los acentos.

   ─── Categorías ───
   Cada categoría conserva un matiz propio — la home muestra chips
   e iconos de métrica de colores distintos, y esa variedad es
   parte del lenguaje visual bento. Los valores parten de los
   mismos hex que trae data/categories.json, ajustados a un tono
   pastel coherente con el fondo violeta.
   ============================================================ */

:root {
  /* ─── Superficies ─────────────────────────────────────────── */
  --bg: #D9D9F5;
  --bg-2: #CBCBEE;         /* hundido: inputs, chips inactivos, tracks */
  --panel: #FFFFFF;        /* la mayoría de las tarjetas del bento */
  --panel-2: #F7F7FD;      /* elevado / hover sobre --panel */
  --panel-3: #ECECF7;      /* hundido DENTRO de un panel — chips, avatar de
                              respaldo, hover de menú. Sigue el modo como
                              cualquier superficie; NO es el "acento oscuro"
                              fijo del bento (ese va con el hex #1E1E24
                              literal en bento.css — ver la nota ahí). */
  --overlay: rgba(20, 20, 28, 0.55);

  /* ─── Texto ──────────────────────────────────────────────── */
  --ink: #1E1E24;           /* ~15.5:1 sobre --panel */
  --ink-2: #46464F;         /* ~9.4:1 */
  --muted: #6F6F82;         /* ~4.9:1 sobre --panel */
  --placeholder: #9A9AB0;   /* ~3.1:1 sobre --bg-2 */
  --ink-inverse: #F5F5FA;   /* texto sobre una superficie SIEMPRE oscura
                               (independiente del modo) — p.ej. la tarjeta
                               "acento oscuro" del bento, ver bento.css. */

  /* ─── Bordes y relieve ───────────────────────────────────────
     Bento plano: sin bisel, capas separadas por sombra difusa y un
     hairline muy claro en vez de un borde marcado. */
  --outline: #1E1E24;
  --outline-rgb: 30, 30, 36;
  --frame: #ECECF7;
  --frame-light: #F3F3FA;
  --bevel-light: transparent;
  --bevel-dark: transparent;
  --line: #ECECF7;

  /* ─── Paleta de "materiales" ─────────────────────────────────
     grass = naranja de marca (acción primaria / éxito / XP);
     diamond = celeste (info/foco, el segundo acento del mock);
     gold = ámbar (atención, logros); copper = gris oscuro neutro;
     amethyst colapsa a un violeta cercano al fondo, para variar
     sin romper la paleta. */
  --grass: #FF9F68;
  --grass-bright: #FFB37F;
  --grass-deep: #E77D3E;
  --gold: #FFC65C;
  --diamond: #6BD6E0;
  --redstone: #F2545B;
  --amethyst: #A6A6F0;
  --copper: #46464F;
  --iron: #B4B4C8;

  --grass-rgb: 255, 159, 104;
  --gold-rgb: 255, 198, 92;
  --diamond-rgb: 107, 214, 224;
  --redstone-rgb: 242, 84, 91;
  --iron-rgb: 180, 180, 200;

  /* Variantes legibles como TEXTO sobre --panel. */
  --grass-ink: #E06A2C;      /* ~4.6:1 sobre blanco */
  --gold-ink: #9C6B00;       /* ~4.8:1 */
  --diamond-ink: #0E7D85;    /* ~4.6:1 */
  --danger-ink: #C22630;     /* ~5.6:1 */
  --success-ink: #E06A2C;
  --warning-ink: #9C6B00;

  /* Texto ENCIMA de un relleno de material: los rellenos son
     claros, así que la tinta va oscura. */
  --on-grass: #2B1206;
  --on-gold: #3A2C00;
  --on-diamond: #063338;
  --on-redstone: #3A0508;

  --color-success: var(--grass);
  --color-warning: var(--gold);
  --color-info: var(--diamond);
  --color-danger: var(--redstone);
  --on-danger: var(--on-redstone);

  /* ─── Acentos por categoría ───────────────────────────────────
     A diferencia de terralabs, cada categoría conserva un matiz
     propio: es lo que da la variedad de colores en los chips y
     los iconos de métrica del bento. */
  --cat-onboarding: #5CA83C;
  --cat-onboarding-ink: #3D7527;
  --cat-lideres: #E0A600;
  --cat-lideres-ink: #8A6600;
  --cat-ia: #1FB4C0;
  --cat-ia-ink: #0E7D85;
  --cat-speakers: #A96BE0;
  --cat-speakers-ink: #6B3FA0;
  --cat-blandas: #E8825A;
  --cat-blandas-ink: #A8501F;
  --cat-offboarding: #9AA5B1;
  --cat-offboarding-ink: #5C6672;

  --accent: var(--grass);
  --accent-ink: var(--grass-ink);
  --on-accent: var(--on-grass);

  /* ─── Dificultad ───────────────────────────────────────────── */
  --diff-basico: var(--iron);
  --diff-intermedio: var(--copper);
  --diff-avanzado: var(--grass);

  /* ─── Tipografía ─────────────────────────────────────────────
     Una sola familia geométrica para todo: es el rasgo del bento
     (títulos, cifras y cuerpo comparten trazo, solo cambia el peso). */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-pixel: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ─── Relieves — plano con sombra difusa ─────────────────────
     Sin bisel ni sombra de texto: las tarjetas se despegan con
     --drop, no con un borde en escalón. */
  --bevel-out: none;
  --bevel-in: none;
  --outline-ring: 0 0 0 1px var(--frame);
  --chip-ring: 0 0 0 1px var(--frame);
  --drop: 0 2px 10px rgba(30, 30, 36, 0.08);
  --drop-lg: 0 24px 48px rgba(30, 30, 36, 0.16);
  --frame-ring: 0 0 0 1px var(--frame);
  --frame-ring-lg: 0 0 0 1px var(--frame);
  --slot-in: inset 0 0 0 1px var(--frame);
  --text-shadow: none;
  --text-shadow-sm: none;

  /* ─── Esquinas — bento: muy redondeadas ─────────────────────── */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ─── Superficie del reproductor de cápsulas ────────────────
     Un escalón más oscuro que --panel-3, igual en los dos modos,
     por la misma razón que en terralabs: el contenido embebido no
     depende de si el modo claro u oscuro está activo. */
  --modal-bg: #16161B;
  --modal-bg-2: #1E1E24;
  --modal-ink: #F5F5FA;
  --modal-ink-2: #D6D6E0;
  --modal-muted: #9A9AB0;
  --modal-border: #2C2C36;

  /* ─── Grilla y huecos ───────────────────────────────────────── */
  --glow: rgba(255, 159, 104, 0.35);
  --grid-line: rgba(30, 30, 36, 0.05);
  --grid-glow: rgba(var(--grass-rgb), 0.10);
  --inset: rgba(20, 20, 28, 0.10);
  --inset-soft: rgba(20, 20, 28, 0.06);

  /* ─── Hero de la pantalla de acceso ───────────────────────────
     Violeta claro con un halo naranja: la misma pareja de colores
     del bento, aplicada al acceso. */
  --hero-bg:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 159, 104, 0.22) 0%, transparent 62%),
    linear-gradient(160deg, #EDEDFB 0%, #D3D3F2 100%);
  --hero-landscape: none;

  /* ─── Tokens de componente ───────────────────────────────────── */
  --google-btn-bg: #FFFFFF;
  --google-btn-ink: #1E1E24;
  --btn-danger-ink: var(--on-redstone);
  --xp-fill-bg: var(--grass);
}

[data-category] {
  --on-accent: #2B1206;
}

/* ============================================================
   MODO OSCURO
   ------------------------------------------------------------
   El bento es claro por diseño; el oscuro existe porque el toggle
   de modo (ver bindThemeToggle en ui/theme.js) es una preferencia
   de la persona, independiente de la identidad. Invierte
   superficies y tinta; los acentos (naranja/celeste/dorado) no
   cambian — son la marca.
   ============================================================ */
:root[data-mode='dark'] {
  --bg: #14141B;
  --bg-2: #0F0F14;
  --panel: #1E1E24;
  --panel-2: #26262E;
  --panel-3: #191920;      /* hundido dentro de un panel oscuro */
  --overlay: rgba(0, 0, 0, 0.6);

  --ink: #F5F5FA;
  --ink-2: #D6D6E0;
  --muted: #9A9AB0;
  --placeholder: #6E6E82;
  --ink-inverse: #1E1E24;

  --outline: #F5F5FA;
  --outline-rgb: 245, 245, 250;
  --frame: #2C2C36;
  --frame-light: #34343E;
  --line: #2C2C36;

  --grass-ink: #FFB37F;
  --gold-ink: #FFD782;
  --diamond-ink: #8DE6EE;
  --danger-ink: #FF8890;
  --success-ink: #FFB37F;
  --warning-ink: #FFD782;

  --cat-offboarding-ink: #C7CBD3;

  --diff-intermedio: #B4B4C8;

  --inset: rgba(0, 0, 0, 0.35);
  --inset-soft: rgba(0, 0, 0, 0.22);

  --grid-line: rgba(255, 255, 255, 0.06);
  --drop: 0 2px 10px rgba(0, 0, 0, 0.4);
  --drop-lg: 0 24px 48px rgba(0, 0, 0, 0.5);

  --google-btn-bg: #FFFFFF;
  --google-btn-ink: #1E1E24;

  --hero-bg:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 159, 104, 0.18) 0%, transparent 62%),
    linear-gradient(160deg, #1C1C24 0%, #101015 100%);
}