/* ===========================================================
   QCE — DESIGN TOKENS (MACROFASE 4, GATE 1)
   Extraidos del prototipo aprobado (review_qce_web_home_v2_01).
   Colores muestreados directamente de los assets QCE aprobados —
   no inventados. Unica familia tipografica: Montserrat (ya en uso
   en la plataforma, no se introduce una fuente nueva).
   =========================================================== */

:root{
  /* ---- paleta QCE ---- */
  --qce-cream-page:#F7EEE1;
  --qce-cream-card:#FBF6ED;
  --qce-cream-deep:#EFE4D2;
  --qce-ink:#221F1C;
  --qce-ink-soft:#4A443C;
  --qce-red:#AF3C2A;
  --qce-red-deep:#8E2F21;
  --qce-green:#27623C;
  --qce-green-deep:#1E4C30;
  --qce-black:#35332F;
  --qce-gold:#B08B4F;
  --qce-line:rgba(34,31,28,.14);
  --qce-line-soft:rgba(34,31,28,.08);

  /* ---- tablero programatico (board.js) ---- */
  --qce-board-light:#E8BE8C;
  --qce-board-dark:#6B4327;
  --qce-board-frame-1:#4A2F1C;
  --qce-board-frame-2:#2E1C10;
  --qce-board-inlay:#C9A86A;

  /* ---- acentos de "Aprende" (uno por camino, ver seccion 14 del brief) ---- */
  --qce-accent-escuela:#8A6A3F;
  --qce-accent-cursoq:var(--qce-red);
  --qce-accent-entrenamiento:var(--qce-black);
  --qce-accent-reglas:var(--qce-green);

  /* ---- elevacion ---- */
  --qce-shadow:0 24px 60px -30px rgba(34,31,28,.35);
  --qce-shadow-soft:0 12px 30px -18px rgba(34,31,28,.28);

  /* ---- tipografia ---- */
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ---- layout ---- */
  --container:1320px;
  --gutter:clamp(20px,4vw,64px);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
}

/*
  Breakpoints de referencia (documentales — CSS no permite var() dentro
  de @media, se mantienen como constante compartida por convencion):
    mobile:  hasta 767px  (base, mobile-first)
    tablet:  768px  – 1023px
    laptop:  1024px – 1279px
    desktop: 1280px en adelante
  QA validado en: 1920, 1440, 1366, 1280, 1024, 768, 390 — ver docs/QA_CHECKLIST.md
*/