/* ===================================================================
   Academia Alquimia del Ser — identidad sobre el motor e-learning.
   Se carga DESPUÉS de css/storefront.css en campus, curso, resultado y
   legales: reescribe sus variables y tipografías sin tocar sus layouts.
=================================================================== */

:root {
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body: 'Switzer', system-ui, -apple-system, sans-serif;

  --ink: #1b2540;
  --muted: #565d73;
  --green: #0e1c3a;      /* azul noche: color primario del motor */
  --green-2: #1d3f78;    /* azul */
  --coral: #b9903f;      /* oro: acentos */
  --gold: #e3c483;
  --paper: #faf5e9;
  --wash: #f4ecda;
  --line: rgba(27,37,64,.14);
  --danger: #9d3325;
  --shadow: 0 24px 60px -30px rgba(20,28,54,.45);
  --brand: #0e1c3a;

  font-family: var(--font-body);
}

body { background: var(--wash); color: var(--ink); }

h1, h2, h3, h4,
.brand,
.catalog-toolbar h1,
.drawer-heading h2,
.detail-copy h2,
.dialog-top h2,
.order-result h3,
.sidebar-title h1,
.campus-welcome h2,
.lesson-content h1,
.auth-gate-copy h1,
.auth-gate > form h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
}

.brand { color: var(--green); font-weight: 500; }
.campus-header, .campus-sidebar, .lesson-nav, .lesson-nav-header,
.student-course, .lesson-link, .auth-gate { background: #fff9ec; }
.campus-body { background: #efe4cd; }

/* Botones con el mismo lenguaje que la home: pastilla, sin esquinas duras */
.primary-button, .secondary-button, .resource-link {
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
}
.primary-button { background: var(--green-2); border-color: var(--green-2); color: #faf5e9; }
.primary-button:hover { background: #142c56; border-color: #142c56; }
.secondary-button { color: var(--green-2); border-color: var(--line); background: transparent; }
.secondary-button:hover { background: rgba(29,63,120,.08); border-color: var(--green-2); }

input, select, textarea { border-radius: 12px; border-color: var(--line); background: #fff9ec; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(185,144,63,.16); }

.eyebrow { color: var(--coral) !important; }
.level-badge, .cart-command { background: rgba(14,28,58,.9); }
.progress-track i, .student-course.active { --accent: var(--coral); }
.lesson-breadcrumb { color: var(--coral); }

.site-header { background: rgba(250,245,233,.94); border-bottom-color: var(--line); }
footer { background: #0a1428; color: #f4ecda; }
footer > div strong { font-family: var(--font-display); color: #faf5e9; }