/* ==========================================================================
   JAC Base — Design tokens + utility classes
   Sistema de diseño v3 · Premium boutique balanceado
   Referencia: /docs/handoff/DESIGN-SYSTEM.md y snippets/tokens.css
   ========================================================================== */

:root {
  /* ── Color · paleta ─────────────────────────────── */
  --jac-ink:         #1a1530;
  --jac-indigo:      #2d2255;
  --jac-indigo-deep: #0f0a1f;
  --jac-lila:        #6b5fa0;
  --jac-lila-soft:   #9a8fbf;
  --jac-gold:        #a86f2c;
  --jac-gold-light:  #c89456;
  --jac-amber:       #e8b87a;
  --jac-cream:       #f3ebd9;
  --jac-bone:        #fbfaf6;
  --jac-cream-line:  #d4c08a;
  --jac-bone-line:   #e5dfd2;
  --jac-text-mid:    #4a4260;
  --jac-text-mute:   #7a708f;

  /* ── Tipografía ─────────────────────────────────── */
  --jac-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --jac-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --jac-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Escala tipográfica ─────────────────────────── */
  --jac-display-xl: clamp(56px, 8vw, 108px);
  --jac-display-lg: clamp(48px, 6.5vw, 84px);
  --jac-display-md: clamp(44px, 6vw, 72px);
  --jac-display-sm: clamp(36px, 4.8vw, 56px);
  --jac-h3:         clamp(28px, 3vw, 40px);
  --jac-h4:         clamp(24px, 2.4vw, 32px);
  --jac-quote-lg:   clamp(40px, 6vw, 80px);
  --jac-quote:      clamp(32px, 4.5vw, 56px);
  --jac-body-lg:    19px;
  --jac-body:       17px;
  --jac-body-sm:    14px;
  --jac-kicker:     11px;
  --jac-meta:       10px;

  /* ── Espaciado ──────────────────────────────────── */
  --jac-section-y:        120px;
  --jac-section-y-strong: 160px;
  --jac-gutter:           72px;
  --jac-max-width:        1136px;

  /* ── Bordes ─────────────────────────────────────── */
  --jac-line-cream:  1px solid var(--jac-cream-line);
  --jac-line-dark:   1px solid rgba(232, 184, 122, 0.35);
  --jac-card-top:    4px solid var(--jac-gold);

  /* ── Tratamiento de imagen ──────────────────────── */
  --jac-img-filter:          saturate(0.92) contrast(1.02);
  --jac-img-filter-portrait: saturate(0.88) sepia(0.08) contrast(1.04);

  /* ── Overlays ───────────────────────────────────── */
  --jac-overlay-hero:      linear-gradient(105deg, rgba(45,34,85,0.92) 0%, rgba(45,34,85,0.65) 45%, rgba(45,34,85,0.15) 100%);
  --jac-overlay-fullquote: linear-gradient(180deg, rgba(45,34,85,0.4) 0%, rgba(45,34,85,0.85) 100%);
  --jac-overlay-cta:       linear-gradient(95deg, rgba(45,34,85,0.95) 0%, rgba(45,34,85,0.7) 60%, rgba(45,34,85,0.4) 100%);
}

/* ==========================================================================
   Responsive overrides
   ========================================================================== */

@media (max-width: 960px) {
  :root {
    --jac-section-y:        80px;
    --jac-section-y-strong: 104px;
    --jac-gutter:           32px;
  }
}

@media (max-width: 600px) {
  :root {
    --jac-section-y:        64px;
    --jac-section-y-strong: 80px;
    --jac-gutter:           24px;
  }
}

/* ==========================================================================
   Global body/typography defaults
   ========================================================================== */

body {
  font-family: var(--jac-font-body);
  font-size: var(--jac-body);
  line-height: 1.65;
  color: var(--jac-ink);
  background-color: var(--jac-cream);
}

/* ==========================================================================
   JAC utility classes — reutilizables en HTML y block patterns
   ========================================================================== */

.jac-display {
  font-family: var(--jac-font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--jac-ink);
}
.jac-display em,
.jac-display i {
  font-style: italic;
  font-weight: 400;
}
.jac-display--xl { font-size: var(--jac-display-xl); line-height: 0.88; }
.jac-display--lg { font-size: var(--jac-display-lg); line-height: 0.95; }
.jac-display--md { font-size: var(--jac-display-md); line-height: 1.0; }
.jac-display--sm { font-size: var(--jac-display-sm); line-height: 1.05; }

.jac-body {
  font-family: var(--jac-font-body);
  font-size: var(--jac-body);
  line-height: 1.65;
  color: var(--jac-text-mid);
}
.jac-body--lg { font-size: var(--jac-body-lg); line-height: 1.55; }
.jac-body--sm { font-size: var(--jac-body-sm); line-height: 1.65; }

.jac-kicker {
  font-family: var(--jac-font-mono);
  font-size: var(--jac-kicker);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--jac-gold);
  font-weight: 500;
}

.jac-meta {
  font-family: var(--jac-font-mono);
  font-size: var(--jac-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.jac-quote {
  font-family: var(--jac-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.jac-quote em,
.jac-quote i { font-style: italic; font-weight: 500; }

.jac-amber { color: var(--jac-amber); }
.jac-gold  { color: var(--jac-gold); }

/* Imagen con tratamiento editorial unificado */
.jac-image          { filter: var(--jac-img-filter); }
.jac-image--portrait { filter: var(--jac-img-filter-portrait); }

/* Contenedor central estándar */
.jac-container {
  max-width: var(--jac-max-width);
  margin: 0 auto;
  padding-left: var(--jac-gutter);
  padding-right: var(--jac-gutter);
}

/* Sección con respiración estándar */
.jac-section    { padding-top: var(--jac-section-y); padding-bottom: var(--jac-section-y); }
.jac-section--strong { padding-top: var(--jac-section-y-strong); padding-bottom: var(--jac-section-y-strong); }
.jac-section--cream  { background: var(--jac-cream); }
.jac-section--bone   { background: var(--jac-bone); }
.jac-section--indigo { background: var(--jac-indigo); color: var(--jac-cream); }
.jac-section--indigo-deep { background: var(--jac-indigo-deep); color: var(--jac-cream); }