/* =============================================
   CESA Design System — Base & Global Styles
   ============================================= */

/* tokens.css se carga explícitamente en head.ejs antes que este archivo */

/* ----- Reset & Box Model ----- */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; }
a { text-decoration: none; color: inherit; }

/* ----- Base Typography ----- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background-color: var(--cesa-cream);
  color: var(--cesa-black);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0;
}

p { margin: 0; }

/* ----- Utility: Layout ----- */
.page-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-px);
}

@media (min-width: 640px)  { .page-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .page-container { padding-inline: 2rem; } }

main { flex: 1; }

/* ----- Utility: Text ----- */
.text-heading  { font-family: var(--font-heading); }
.text-body     { font-family: var(--font-body); }
.text-upper    { text-transform: uppercase; letter-spacing: 0.08em; }
.text-cream    { color: var(--cesa-cream); }
.text-gold     { color: var(--cesa-gold); }
.text-navy     { color: var(--cesa-navy); }
.text-burgundy { color: var(--cesa-burgundy); }

/* ----- Utility: Backgrounds ----- */
.bg-cream    { background-color: var(--cesa-cream); }
.bg-navy     { background-color: var(--cesa-navy); }
.bg-burgundy { background-color: var(--cesa-burgundy); }
.bg-gold     { background-color: var(--cesa-gold); }
.bg-green    { background-color: var(--cesa-green); }

/* ----- Utility: Line Clamp ----- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ----- Utility: Aspect ratios ----- */
.aspect-video { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1; }
.aspect-4-3 { aspect-ratio: 4/3; }

/* ----- Prose (rich text content) ----- */
.prose p  { margin-bottom: 0.75rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; font-family: var(--font-heading); }
.prose a  { color: var(--cesa-gold); text-decoration: underline; }