/* ================================================================
   DESIGN SYSTEM — design-system.css
   <link rel="stylesheet" href="design-system.css">
   ================================================================ */


/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */

:root {

  /* ------------------------------------------------------------------
     COLORES PRIMARIOS
  ------------------------------------------------------------------ */
  --color-azul: #2B3752;
  --color-rosa: #C18681;


  /* ------------------------------------------------------------------
     COLORES SECUNDARIOS
  ------------------------------------------------------------------ */
  --color-beige:  #DEA465;
  --color-claro:  #FFF8F0;
  --color-negro:  #1E1E1E;
  --color-gris:   #E8EAE4;
  --color-blanco: #FFFFFF;


  /* ------------------------------------------------------------------
     TINTES — AZUL (01 oscuro → 04 claro)
  ------------------------------------------------------------------ */
  --color-azul-01: #2B3752;
  --color-azul-02: #1E2943;
  --color-azul-03: #868FA5;
  --color-azul-04: #E8EAF0;


  /* ------------------------------------------------------------------
     TINTES — ROSA (01 oscuro → 04 claro)
  ------------------------------------------------------------------ */
  --color-rosa-01: #462623;
  --color-rosa-02: #916460;
  --color-rosa-03: #E5B6B2;
  --color-rosa-04: #FCF1F0;


  /* ------------------------------------------------------------------
     TINTES — BEIGE (01 oscuro → 04 claro)
  ------------------------------------------------------------------ */
  --color-beige-01: #533614;
  --color-beige-02: #B78044;
  --color-beige-03: #FCCE9B;
  --color-beige-04: #FFE2C0;


  /* ------------------------------------------------------------------
     ALIASES SEMÁNTICOS — usa estos en componentes
  ------------------------------------------------------------------ */
  --color-bg:          var(--color-claro);
  --color-surface:     var(--color-blanco);
  --color-text-strong: var(--color-negro);
  --color-text-body:   var(--color-azul-02);
  --color-text-muted:  var(--color-azul-03);
  --color-border:      var(--color-gris);


  /* ------------------------------------------------------------------
     TIPOGRAFÍA
  ------------------------------------------------------------------ */
  --font-body: 'Manrope', sans-serif;
  --line-height: 1.3;

  /* Tamaños desktop */
  --text-h1:   45px;
  --text-h2:   39px;
  --text-h3:   32px;
  --text-h4:   26px;
  --text-h5:   22px;
  --text-h6:   14px;
  --text-btn:  16px;
  --text-body: 16px;

  /* Letter spacing desktop */
  --ls-h1:   2.70px;
  --ls-h2:   2.34px;
  --ls-h3:   1.92px;
  --ls-h4:   1.56px;
  --ls-h5:   1.32px;
  --ls-h6:   0.84px;
  --ls-btn:  0.96px;
  --ls-body: 0.96px;


  /* ------------------------------------------------------------------
     SPACING
  ------------------------------------------------------------------ */
  --space-01: 0px;
  --space-02: 12px;
  --space-03: 16px;
  --space-04: 24px;
  --space-05: 32px;
  --space-06: 56px;
  --space-07: 72px;
  --space-08: 80px;
  --space-09: 96px;
  --space-10: 120px;
  --space-11: 160px;
  --space-12: 180px;
  --space-13: 200px;


  /* ------------------------------------------------------------------
     LAYOUT / BREAKPOINTS
  ------------------------------------------------------------------ */
  --width-desktop-inner: 1320px;
  --width-mobile-inner:  280px;
  --margin-desktop:      60px;
  --margin-mobile:       20px;


  /* ------------------------------------------------------------------
     SOMBRAS
  ------------------------------------------------------------------ */
  --shadow-1: 0px 15px 45px rgba(43,  55,  82,  0.10);
  --shadow-2: 0px 24px 32px rgba(195, 195, 195, 0.15);
  --shadow-3: 0px 20px 45px rgba(222, 164, 101, 0.15);
  --shadow-4: 0px 20px 45px rgba(30,  30,  30,  0.15);


  /* ------------------------------------------------------------------
     RADIUS
  ------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;


  /* ------------------------------------------------------------------
     TRANSICIONES
  ------------------------------------------------------------------ */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height);
  letter-spacing: var(--ls-body);
  color: var(--color-text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}


/* ----------------------------------------------------------------
   3. TIPOGRAFÍA
   ---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: var(--line-height);
  color: var(--color-text-strong);
}

h1 { font-size: var(--text-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--text-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--text-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--text-h4); letter-spacing: var(--ls-h4); }
h5 { font-size: var(--text-h5); letter-spacing: var(--ls-h5); }
h6 { font-size: var(--text-h6); letter-spacing: var(--ls-h6); }

.text-body {
  font-size: var(--text-body);
  line-height: var(--line-height);
  letter-spacing: var(--ls-body);
  color: var(--color-text-body);
}

/* Mobile typography */
@media (max-width: 768px) {
  h1 { font-size: 35px; letter-spacing: 2.10px; }
  h2 { font-size: 30px; letter-spacing: 1.80px; }
  h3 { font-size: 26px; letter-spacing: 1.56px; }
  h4 { font-size: 23px; letter-spacing: 1.38px; }
  h5 { font-size: 19px; letter-spacing: 1.14px; }
  h6 { font-size: 12px; letter-spacing: 0.72px; }
  body, .text-body { font-size: 14px; }
}


/* ----------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-02);
  padding: var(--space-03) var(--space-06);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-btn);
  font-weight: 700;
  letter-spacing: var(--ls-btn);
  line-height: var(--line-height);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast),
    box-shadow       var(--transition-fast),
    transform        var(--transition-fast);
}

.btn:active { transform: translateY(1px); }

/* Primario — Azul sólido */
.btn-primary {
  background: var(--color-azul);
  border-color: var(--color-azul);
  color: var(--color-blanco);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover {
  background: var(--color-azul-02);
  border-color: var(--color-azul-02);
  box-shadow: var(--shadow-4);
  transform: translateY(-2px);
}

/* Secundario — outline Azul */
.btn-secondary {
  background: transparent;
  border-color: var(--color-azul);
  color: var(--color-azul);
}
.btn-secondary:hover {
  background: var(--color-azul-04);
  border-color: var(--color-azul-02);
  color: var(--color-azul-02);
  transform: translateY(-2px);
}

/* Rosa */
.btn-rosa {
  background: var(--color-rosa);
  border-color: var(--color-rosa);
  color: var(--color-blanco);
  box-shadow: var(--shadow-3);
}
.btn-rosa:hover {
  background: var(--color-rosa-02);
  border-color: var(--color-rosa-02);
  transform: translateY(-2px);
}

/* Beige */
.btn-beige {
  background: var(--color-beige);
  border-color: var(--color-beige);
  color: var(--color-blanco);
  box-shadow: var(--shadow-3);
}
.btn-beige:hover {
  background: var(--color-beige-02);
  border-color: var(--color-beige-02);
  transform: translateY(-2px);
}

/* Mobile btn */
@media (max-width: 768px) {
  .btn { font-size: 14px; padding: var(--space-02) var(--space-05); }
}


/* ----------------------------------------------------------------
   5. LAYOUT — Container
   ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--width-desktop-inner);
  margin-inline: auto;
  padding-inline: var(--margin-desktop);
}

@media (max-width: 768px) {
  .container {
    padding-inline: var(--margin-mobile);
  }
}