/* ═══════════════════════════════════════════════
   CAVES TOWERS — SISTEMA DE DISEÑO
   Variables, tipografía, utilidades base
   ═══════════════════════════════════════════════ */

:root {
  /* ─── Sistema cromático ─── */
  --ct-paper:        #F5F3EE;
  --ct-paper-deep:   #EDEAE2;
  --ct-ink:          #0A0E1A;
  --ct-ink-soft:     #1A2030;
  --ct-primary:      #1E3A5F;
  --ct-primary-deep: #0E1D33;
  --ct-accent:       #00B894;
  --ct-accent-bright:#00D4A8;
  --ct-muted:        #5A5F6E;

  /* Líneas */
  --ct-line:         rgba(10, 14, 26, 0.08);
  --ct-line-strong:  rgba(10, 14, 26, 0.16);
  --ct-line-dark:    rgba(255, 255, 255, 0.08);
  --ct-line-dark-strong: rgba(255, 255, 255, 0.16);

  /* ─── Tipografía ─── */
  --ct-font-display: 'Fraunces', Georgia, serif;
  --ct-font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ct-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Escala tipográfica (fluid clamp) */
  --ct-text-xs:   0.72rem;
  --ct-text-sm:   0.82rem;
  --ct-text-base: 1rem;
  --ct-text-md:   1.08rem;
  --ct-text-lg:   1.5rem;
  --ct-text-xl:   2rem;
  --ct-text-2xl:  clamp(2rem, 4vw, 3.2rem);
  --ct-text-3xl:  clamp(2.4rem, 5vw, 4.4rem);
  --ct-text-display: clamp(3rem, 7vw, 6.4rem);

  /* ─── Espaciado ─── */
  --ct-space-2xs: 4px;
  --ct-space-xs:  8px;
  --ct-space-sm:  16px;
  --ct-space-md:  24px;
  --ct-space-lg:  32px;
  --ct-space-xl:  48px;
  --ct-space-2xl: 64px;
  --ct-space-3xl: 80px;
  --ct-space-4xl: 120px;

  /* ─── Layout ─── */
  --ct-container-max: 1400px;
  --ct-gutter:        32px;
  --ct-gutter-mobile: 20px;

  /* ─── Tipografía de letterspacing ─── */
  --ct-tracking-tight:  -0.04em;
  --ct-tracking-tighter:-0.025em;
  --ct-tracking-normal: 0;
  --ct-tracking-wide:   0.12em;
  --ct-tracking-wider:  0.16em;
}

/* ═══════════════════════════════════════════════
   BASE TYPOGRAPHY
   ═══════════════════════════════════════════════ */

body {
  font-family: var(--ct-font-sans);
  font-weight: 400;
  font-size: var(--ct-text-base);
  line-height: 1.55;
  background: var(--ct-paper);
  color: var(--ct-ink);
}

/* Grano sutil de fondo (efecto papel) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

main, header, footer { position: relative; z-index: 2; }

/* Tipografía Display (para títulos editoriales) */
.ct-display {
  font-family: var(--ct-font-display);
  font-weight: 400;
  letter-spacing: var(--ct-tracking-tight);
  line-height: 1;
}

.ct-mono {
  font-family: var(--ct-font-mono);
  font-size: var(--ct-text-xs);
  letter-spacing: 0.02em;
}

.ct-eyebrow {
  font-family: var(--ct-font-mono);
  font-size: var(--ct-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ct-tracking-wider);
  color: var(--ct-muted);
}

/* ═══════════════════════════════════════════════
   UTILIDADES
   ═══════════════════════════════════════════════ */

.ct-container {
  max-width: var(--ct-container-max);
  margin: 0 auto;
  padding: 0 var(--ct-gutter);
}

@media (max-width: 768px) {
  .ct-container {
    padding: 0 var(--ct-gutter-mobile);
  }
}

/* Sección estándar */
.ct-section {
  padding: var(--ct-space-4xl) var(--ct-gutter);
}

@media (max-width: 768px) {
  .ct-section {
    padding: var(--ct-space-2xl) var(--ct-gutter-mobile);
  }
}

/* Bordes seccionales */
.ct-section--bordered-top    { border-top: 1px solid var(--ct-line); }
.ct-section--bordered-bottom { border-bottom: 1px solid var(--ct-line); }

/* Tema oscuro de sección */
.ct-section--dark {
  background: var(--ct-primary-deep);
  color: var(--ct-paper);
}