/* ==========================================================================
   BioStudy Lab — Tokens de diseño
   Paleta institucional: no cambiar los cinco valores base.
   ========================================================================== */

:root {
  /* --- Paleta base de marca --------------------------------------------- */
  --color-night: #172039;   /* Encabezados, navegación y estructura */
  --color-violet: #6256C9;  /* Botones principales, progreso, juego */
  --color-teal: #278A80;    /* Aciertos, confirmaciones, completado */
  --color-amber: #F2C14E;   /* Recompensas XP, avisos, desafíos BOSS */
  --color-bg: #F4F6FB;      /* Fondo general para sesiones largas */

  /* --- Derivados (tonos para estados y contraste AA) --------------------- */
  --color-night-800: #1F2A4A;
  --color-night-600: #34416B;
  --color-violet-600: #5045B3;
  --color-violet-100: #ECEAFA;
  --color-teal-700: #1D6B63;
  --color-teal-300: #5CC7BB;
  --color-teal-100: #E2F3F1;
  --color-amber-800: #6B4E0A;
  --color-amber-100: #FDF4DC;
  --color-danger: #B42318;
  --color-danger-800: #7A1A12;
  --color-danger-100: #FDECEA;

  /* --- Superficies y texto ----------------------------------------------- */
  --color-surface: #FFFFFF;
  --color-text: var(--color-night);
  --color-text-muted: #56607A;
  --color-text-on-dark: #E8EBF5;
  --color-text-on-dark-muted: #A9B1C9;
  --color-border: #DDE2EE;
  --color-border-strong: #C3CADB;

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --fs-3xl: clamp(2rem, 4.2vw, 3.25rem);

  /* --- Espaciado --------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Forma y profundidad ----------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-raised: 0 1px 2px rgba(23, 32, 57, 0.08), 0 8px 24px -12px rgba(23, 32, 57, 0.25);
  --shadow-xs: 0 1px 3px rgba(23, 32, 57, 0.06);
  --shadow-sm: 0 4px 16px rgba(23, 32, 57, 0.06);
  --shadow-md: 0 10px 32px rgba(23, 32, 57, 0.08);
  --shadow-lg: 0 24px 72px rgba(23, 32, 57, 0.18);
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --dur-fast: 160ms;
  --focus-ring-color: rgba(98, 86, 201, 0.55);

  /* --- Layout y movimiento ----------------------------------------------- */
  --navbar-h: 64px;
  --content-max: 1180px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}