/* Explorax color system.
   Exact values transcribed from the "01.-Colores" Figma page + top color-usage
   counts in METADATA.md. Semantic aliases group them the way the kit actually
   uses them: a bright "front" fill always pairs with a darker flat "shadow"
   color used as a solid (non-blurred) offset box-shadow — the kit's signature
   chunky 3D-button look. Never introduce blur into these shadows. */

:root {
  /* ---- Base palette (exact kit values) ---- */
  --navy-900: #000f38;   /* rgb(0,15,56) — deepest ink, outlines */
  --navy-800: #003065;   /* rgb(0,48,101) — primary text on light */
  --navy-700: #133362;   /* rgb(19,51,98) */
  --navy-deep-shadow: #003054; /* rgb(0,48,84) — "Sombra / verificar" */
  --slate-500: #8e8e8e;  /* rgb(142,142,142) — "Sombra / Contenedor" */
  --slate-200: #e8e8e8;  /* rgb(232,232,232) — "Sombra / Contenedor inverso" */
  --gray-300: #bfc1c3;   /* rgb(191,193,195) */

  --gold-600: #d49b4a;   /* rgb(212,155,74) */
  --gold-500: #d5ab58;   /* rgb(213,171,88) */
  --yellow-400: #fec223; /* rgb(254,194,35) */
  --cream-300: #fcf48b;  /* rgb(252,244,139) */
  --cream-gold-400: #f3d04b; /* rgb(243,208,75) */
  --tan-500: #cd8f3f;    /* rgb(205,143,63) */

  --coral-600: #d25534;  /* rgb(210,85,52) */
  --red-shadow: #b52c41; /* rgb(181,44,65) — "Sombra/shadow/Incorrecta" */
  --ups-shadow: #c7123d; /* rgb(199,18,61) — "Sombra / UPS" */

  --sky-500: #54a0c4;    /* rgb(84,160,196) */
  --cyan-600: #02a8b5;   /* rgb(2,168,181) */
  --cyan-300: #09e2e8;   /* rgb(9,226,232) */
  --teal-shadow: #017b89; /* rgb(1,123,137) — "Sombra / Operación-Pregunta 100" */

  --green-500: #4abe0f;  /* rgb(74,190,15) */
  --green-shadow: #17a008; /* rgb(23,160,8) — "Sombra / Excelente" */

  --purple-700: #4e2a67;  /* rgb(78,42,103) — night-sky background */
  --purple-500: #6a359d;  /* rgb(106,53,157) */

  --white: #ffffff;
  --black: #000000;

  /* ---- Semantic: text ---- */
  --text-on-light: var(--navy-800);
  --text-on-dark: var(--white);
  --text-muted: var(--slate-500);

  /* ---- Semantic: surfaces ---- */
  --surface-app-bg: var(--purple-700);   /* the starfield/space screen background */
  --surface-card: var(--white);
  --surface-card-shadow: var(--slate-500); /* the solid offset shadow under white cards/inputs */
  --surface-card-shadow-inverse: var(--slate-200);
  --surface-muted-placeholder: var(--gray-300);

  /* ---- Semantic: action / feedback (fill + matching solid shadow) ---- */
  --action-verify-fill: #63c5ce;         /* "Btn=verificar" fill */
  --action-verify-shadow: var(--navy-deep-shadow);
  --action-primary-fill: var(--gold-600);
  --action-primary-shadow: var(--tan-500);

  --feedback-correct-fill: var(--green-500);
  --feedback-correct-shadow: var(--green-shadow);
  --feedback-incorrect-fill: var(--coral-600);
  --feedback-incorrect-shadow: var(--red-shadow);
  --feedback-ups-shadow: var(--ups-shadow);

  /* ---- Semantic: category accents (question/instruction color-coding) ---- */
  --accent-preguntas: var(--slate-500);   /* "Preguntas" containers: gray-on-white */
  --accent-instrucciones: #004d93;        /* "Instrucciones" containers: blue-on-white */
  --accent-monedas: #111e55;              /* "De monedas" containers */

  /* ---- Figure / illustration palette (planets, asteroids, rewards) ---- */
  --figure-yellow-1: var(--figura-100-amarillo-1, #ffe549);
  --figure-yellow-2: var(--figura-100-amarillo-2, #f4bc00);
  --figure-blue-1: var(--figura-100-azul-1, #81bcf6);
  --figure-brown: var(--figura-100-caf, #c06600);
  --figure-cyan-1: var(--figura-100-celeste-1, #7fe5fc);
  --figure-cyan-2: var(--figura-100-celeste-2, #d2fffd);
  --figure-cyan-3: var(--figura-100-celeste-3, #34c5c5);
  --figure-fuchsia: var(--figura-100-fucsia, #fb619e);
  --figure-lilac: var(--figura-100-lila, #bd89ff);
  --figure-purple: var(--figura-100-morado, #a069dd);
  --figure-orange: var(--figura-100-naranja, #ffb600);
  --figure-red: var(--figura-100-rojo, #ff5760);
  --figure-pink: var(--figura-100-rosado, #ff9398);
  --figure-green-1: var(--figura-100-verde-1, #b5f747);
  --figure-green-2: var(--figura-100-verde-2, #00b158);
  --figure-green-3: var(--figura-100-verde-3, #70feaa);
}