/* Paletas de dictala. Cada paleta da sus colores crudos (--pal-…), en claro y en oscuro; la interfaz nunca los usa directamente:
   usa los papeles de color (--c-…) de más abajo. Para cambiar de paleta: se cambian los valores de la de por defecto (el primer
   bloque) o se añade otra con su nombre, `:root[data-palette="<nombre>"] { … }` con las mismas variables, y se activa con
   data-palette="<nombre>" en <html>. El tema (claro u oscuro) va aparte, en data-theme. */
:root, :root[data-palette="lila"] {
  --pal-ink: #1c1631;       /* tinta: texto en claro y fondos oscuros */
  --pal-paper: #ffffff;     /* papel: fondo claro */
  --pal-muted: #5e5873;     /* texto secundario sobre papel */
  --pal-tint: #e6e0ff;      /* color de fondo de los bloques grandes (portada, zona de crear) */
  --pal-inset: #f1eefb;     /* campos, botones y carriles dentro de una tarjeta: un poco más oscuros que ella (blanca), como en oscuro */
  --pal-side: #efecfa;      /* menú (la lista de proyectos): un escalón por debajo del fondo de los paneles */
  --pal-page: #f7f5fd;      /* fondo de las pantallas de la app */
  --pal-surface: #ffffff;   /* paneles y menús de la app */
  --pal-raised: #ffffff;    /* tarjetas sobre el fondo de un panel (ajustes) */
  --pal-cta: #ff5a36;       /* acción principal */
  --pal-cta-hover: #e8431f;
  --pal-b1: #ffe45c;        /* bloques de color: fichas, planes, iconos de proyecto */
  --pal-b2: #8fe3c0;
  --pal-b3: #9ccbff;
  --pal-b4: #ffb3da;
  /* En oscuro */
  --pal-night: #120f1d;
  --pal-night-fg: #f2efff;
  --pal-night-muted: #aba4c6;
  --pal-night-tint: #1f1935;
  --pal-night-field: #262040;
  --pal-night-side: #171327;
  --pal-night-surface: #1b1630;
  --pal-night-raised: #241e3c;
  --pal-night-inset: #1c1732;  /* campos, botones y carriles dentro de una tarjeta: un poco más oscuros que ella (#241e3c) */
  --pal-night-bubble: #241e3c;
  --pal-night-strong: #2b2350;
  --pal-night-cta-hover: #ff7a5c;
}

/* Papeles de color: lo único que usa la interfaz */
:root {
  --c-fg: var(--pal-ink);          /* texto */
  --c-bg: var(--pal-paper);        /* fondo de la página */
  --c-muted: var(--pal-muted);     /* texto secundario */
  --c-tint: var(--pal-tint);       /* bloques grandes de color */
  --c-field: var(--pal-paper);     /* cajas de texto */
  --c-side: var(--pal-side);       /* barra lateral */
  --c-page: var(--pal-page);       /* fondo de las pantallas de la app */
  --c-menu: var(--c-side);         /* fondo del menú (la lista de proyectos): un escalón por debajo de los paneles, en claro y en oscuro */
  --c-sep: var(--c-menu);          /* franja entre los paneles de trabajo (build.css, --sep-w): el color del menú */
  --c-inset: var(--pal-inset);      /* lo que va dentro de una tarjeta: campos, botones, carriles de las barras (en los dos temas, un poco más oscuro que la tarjeta). Los de la caja de escribir, no: el lila, más discreto */
  --c-panel: var(--c-page);        /* fondo de los paneles de trabajo (chat, vista previa, configuración, terminal): el mismo en todos (12-10-2026); en oscuro, algo más claro que el menú */
  --c-surface: var(--pal-surface); /* paneles y menús de la app */
  --c-raised: var(--pal-raised);   /* tarjetas sobre el fondo de un panel (configuración, avisos del chat): del color de los globos de la IA */
  --c-bubble: var(--pal-paper);    /* globos de la IA en el chat */
  --c-line: color-mix(in srgb, var(--c-fg) 12%, transparent);
  /* Radios: una sola escala para toda la app (07-10-2026; antes había 22 valores distintos). Los círculos van con 50 % y lo que tiene
     los extremos redondos por diseño (la caja de escribir), con su cálculo */
  --r-xs: 6px;      /* detalles pequeños: insignias, barras */
  --r-sm: 10px;     /* controles pequeños: botones de icono, campos compactos */
  --r-md: 14px;     /* menús, filas de listas, avisos */
  --r-lg: 20px;     /* tarjetas y bloques */
  --r-xl: 28px;     /* ventanas flotantes */
  --r-pill: 999px;  /* píldoras */
  --c-well: color-mix(in srgb, var(--pal-tint) 45%, var(--pal-paper)); /* fondo bajo tarjetas blancas (la configuración): sin bordes, se distinguen por el color */
  --c-strong: var(--pal-ink);      /* bandas oscuras (pasos) */
  --c-on-strong: #ffffff;
  --c-cta: var(--pal-cta);         /* botón principal */
  --c-cta-hover: var(--pal-cta-hover);
  --c-on-cta: var(--pal-ink);
  --c-ink: var(--pal-ink);         /* texto fijo sobre bloques de color y tarjetas blancas (no cambia con el tema) */
  --c-ink-muted: var(--pal-muted);
  --c-card: #ffffff;               /* marco de las tarjetas */
  --c-b1: var(--pal-b1);
  --c-b2: var(--pal-b2);
  --c-b3: var(--pal-b3);
  --c-b4: var(--pal-b4);
  --c-shadow: color-mix(in srgb, var(--pal-ink) 50%, transparent);
}
:root[data-theme="dark"] {
  --c-fg: var(--pal-night-fg);
  --c-bg: var(--pal-night);
  --c-muted: var(--pal-night-muted);
  --c-tint: var(--pal-night-tint);
  --c-field: var(--pal-night-bubble); /* (la caja de escribir, como las tarjetas y los globos) */
  --c-side: var(--pal-night-side);
  --c-page: var(--pal-night);
  --c-surface: var(--pal-night-surface);
  --c-panel: var(--pal-night-surface);
  --c-inset: var(--pal-night-inset);
  --c-raised: var(--pal-night-bubble); /* (las tarjetas, del color de los globos de la IA: 12-10-2026) */
  --c-bubble: var(--pal-night-bubble);
  --c-strong: var(--pal-night-strong);
  --c-cta-hover: var(--pal-night-cta-hover);
  --c-shadow: rgba(0, 0, 0, .6);
  --c-well: var(--pal-night-surface); /* (la configuración, algo más clara que la vista previa, --c-side: se distinguen los paneles; las tarjetas, --c-raised, aún más) */
}