/* ==========================================================================
   La Cumbre - tokens.css
   Fuentes autohospedadas + variables de diseño. Único lugar donde se declaran
   colores, tipografía, espaciado, radios, sombras, easings y z-index.
   Ninguna otra hoja debe declarar un color literal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía autohospedada
   Display: Cormorant Garamond (variable 300-600) - justificada por marca:
   desarrollo inmobiliario de lujo, registro editorial/patrimonio.
   Texto: Satoshi 400/500/700 - grotesca cálida, alta legibilidad.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/satoshi-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/satoshi-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/satoshi-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */

:root {
  /* --- Color: una sola familia de gris, tintada en verde. Un solo acento. ---
     Contrastes verificados contra --ink-950 (WCAG 2.1):
       bone      15.95:1    bone-dim  10.11:1
       bone-mute  6.16:1    accent     8.19:1
     Contraste de --ink-950 sobre --accent (texto de botón): 8.19:1          */
  --ink-950: #0b100c;   /* fondo de página */
  --ink-900: #10160f;   /* superficie elevada 1 */
  --ink-850: #141b13;   /* superficie elevada 2 */
  --ink-800: #1a231a;   /* superficie elevada 3 / inputs */
  --ink-700: #232e22;   /* borde fuerte / separadores densos */

  --bone: #edeae0;      /* texto primario */
  --bone-dim: #b9beb0;  /* texto secundario */
  --bone-mute: #8d948a; /* metadata, placeholders */

  --accent: #c8a552;         /* único acento: latón de atardecer */
  --accent-strong: #d9b565;  /* hover del acento */
  --wood: #6b4a32;           /* café madera: solo superficies, nunca texto */
  --danger: #e8836a;         /* error: 6.90:1 sobre --ink-900 */

  --line: rgba(237, 234, 224, 0.12);      /* filete decorativo */
  --line-strong: rgba(237, 234, 224, 0.2);
  --control-border: rgba(237, 234, 224, 0.38); /* controles: 3.17:1 */

  --scrim: rgba(11, 16, 12, 0.72);
  --accent-soft: rgba(200, 165, 82, 0.12);

  /* --- Tipografía --- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 7.2vw, 5.25rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.125rem);
  --fs-h3: clamp(1.3125rem, 2.1vw, 1.625rem);
  --fs-h4: clamp(1.125rem, 1.5vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1.35vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --track-display: -0.03em;
  --track-h2: -0.02em;
  --track-label: 0.16em;

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body: 1.6;

  /* --- Espaciado --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4.5rem, 10vh, 8rem);
  --wrap: 1320px;
  --wrap-narrow: 940px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --measure: 62ch;

  /* --- Forma: candado de una escala. Interiores apretados, contenedores suaves.
     Píldora reservada exclusivamente a controles pequeños. --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Profundidad: sombras tintadas al matiz del fondo, con desplazamiento
     Y desenfoque. Nunca halo de offset cero, nunca negro puro. --- */
  --shadow-sm: 0 1px 2px rgba(6, 10, 7, 0.5), 0 4px 12px rgba(6, 10, 7, 0.32);
  --shadow-md: 0 6px 18px rgba(6, 10, 7, 0.42), 0 20px 48px rgba(6, 10, 7, 0.36);
  --shadow-lg: 0 12px 32px rgba(6, 10, 7, 0.5), 0 40px 90px rgba(6, 10, 7, 0.45);

  /* --- Movimiento: MOTION_INTENSITY 6. Solo transform y opacity. --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --dur-reveal: 700ms;

  /* --- z-index: escala documentada, sin valores arbitrarios --- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
}