/* ===========================================================
   EIDORA — Colors & Type
   Brand palette from "guia.png" + slide deck;
   typography from PPT proposal (Inter Bold / Playfair / Cormorant Italic).
   =========================================================== */

/* Self-hosted brand fonts (latin subset, woff2) */
@import url('./assets/fonts/fonts.css');

:root {
  /* ---------- EIDORA · Paleta definitiva ---------- */
  --eidora-hueso:        #FAFAF7; /* Lienzo principal */
  --eidora-lino:         #E8E2D5; /* Secundario, divisores, fondos suaves */
  --eidora-terracota:    #B97857; /* Acento único, CTAs */
  --eidora-cafe:         #3D3530; /* Texto principal, hero blocks */
  --eidora-tinta:        #1A1714; /* Texto enfático, fondos oscuros */

  /* Legacy aliases — todos los componentes existentes los usan, los re-mapeamos */
  --lr-terracota:        var(--eidora-terracota);
  --lr-arena-calida:     var(--eidora-lino);
  --lr-cal-blanca:       var(--eidora-hueso);
  --lr-tierra-profunda:  var(--eidora-cafe);
  --lr-azul-cielo:       var(--eidora-terracota); /* azul retirado de la paleta — fallback a terracota */

  --lr-terracota-700:    #8E5A41;
  --lr-terracota-300:    #D49A7E;
  --lr-arena-300:        #EFEAD9;
  --lr-arena-700:        #BFB59E;
  --lr-tierra-900:       var(--eidora-tinta);
  --lr-tierra-500:       #6E625A;
  --lr-cal-50:           #FFFFFE;
  --lr-cal-200:          #DFD8C7;

  --lr-ink:              var(--eidora-tinta);
  --lr-paper:            #FFFFFF;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg-canvas:           var(--lr-cal-blanca);
  --bg-canvas-alt:       var(--lr-cal-50);
  --bg-elevated:         var(--lr-paper);
  --bg-inverse:          var(--lr-tierra-profunda);
  --bg-accent:           var(--lr-terracota);
  --bg-soft:             var(--lr-arena-calida);

  --fg-primary:          var(--lr-tierra-profunda);
  --fg-secondary:        var(--lr-tierra-500);
  --fg-muted:            #8C8079;
  --fg-on-accent:        var(--lr-cal-blanca);
  --fg-on-inverse:       var(--lr-cal-blanca);
  --fg-link:             var(--lr-terracota);

  --border-subtle:       rgba(61, 53, 48, 0.12);
  --border-default:      rgba(61, 53, 48, 0.24);
  --border-strong:       var(--lr-tierra-profunda);
  --border-accent:       var(--lr-terracota);

  /* Phase / category accents (mirrors deck) */
  --accent-fase-1:       var(--lr-terracota);
  --accent-fase-2:       var(--lr-azul-cielo);

  /* ---------- TYPE FAMILIES ----------
     Inter Bold        — labels, eyebrows, UI, numerals (heavy + tracked)
     Playfair Display  — display headlines, editorial titles
     Cormorant Italic  — pull quotes, soft sub-headlines, "designed for desire" copy
  */
  --font-display:    'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-italic:     'Cormorant Garamond', 'Playfair Display', serif;
  --font-ui:         'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE (1.250 minor third, anchored at 16px) ---------- */
  --fs-eyebrow: 0.6875rem;   /* 11px tracked label */
  --fs-caption: 0.8125rem;   /* 13px */
  --fs-body:    1rem;        /* 16px */
  --fs-lead:    1.1875rem;   /* 19px lead paragraph */
  --fs-h6:      1.0625rem;
  --fs-h5:      1.25rem;
  --fs-h4:      1.5625rem;
  --fs-h3:      2rem;
  --fs-h2:      2.75rem;
  --fs-h1:      3.75rem;
  --fs-display: 5.5rem;      /* hero / cover */
  --fs-mega:    7.5rem;      /* slide cover, special moments */

  /* ---------- TRACKING / LEADING ---------- */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.16em;     /* eyebrows, "FASE 1 · CONTENIDO" */
  --tracking-widest: 0.24em;    /* EIDORA wordmark */

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* ---------- SPACING (8pt rhythm with 4 half-step) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS (small; brand reads architectural / editorial) ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (very soft; we lean on color + line, not drop shadow) ---------- */
  --shadow-flat:    none;
  --shadow-soft:    0 1px 2px rgba(26, 23, 20, 0.06), 0 8px 24px rgba(26, 23, 20, 0.06);
  --shadow-lift:    0 2px 4px rgba(26, 23, 20, 0.08), 0 24px 48px rgba(26, 23, 20, 0.10);
  --shadow-press:   inset 0 1px 2px rgba(26, 23, 20, 0.20);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;

  /* ---------- LAYOUT ---------- */
  --content-narrow: 720px;
  --content-base:   1080px;
  --content-wide:   1280px;
  --content-xwide:  1320px;   /* canonical width used across all sections */
}

/* ===========================================================
   SEMANTIC ELEMENT STYLES
   Use these as defaults; override with utility classes if needed.
   =========================================================== */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-weight: 600; }
h6 { font-size: var(--fs-h6); font-weight: 600; }

p  {
  margin: 0;
  text-wrap: pretty;
  max-width: 60ch;
}

a  {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }

small, .lr-caption {
  font-size: var(--fs-caption);
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-snug);
}

/* ---------- UTILITY TYPOGRAPHIC CLASSES ---------- */

/* "EIDORA" — heavy, super-tracked Inter Bold, the brand's signature lock-up */
.lr-wordmark {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-size: var(--fs-h6);
}

/* "FIG. 01 · PROMOCIÓN RESIDENCIAL" — small, tracked, caps */
.lr-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* "Estrategia visual y activación de ventas" — display Playfair, italic phrase emphasis */
.lr-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg-primary);
}
.lr-display em,
.lr-italic-accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

/* Lead paragraph — slightly larger Inter, generous leading */
.lr-lead {
  font-size: var(--fs-lead);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
  max-width: 56ch;
}

/* Numerals "01" "02" used as section markers in the deck */
.lr-numeral {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--lr-terracota);
  letter-spacing: 0;
  font-feature-settings: 'lnum' 1;
}

/* ---------- FOCUS ---------- */
:focus-visible {
  outline: 2px solid var(--lr-terracota);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}