/* ============================================================================
   tokens.css — HOTEL SIERRA CLARA · "Azul Manchego"
   Logo real: "Sierra Clara" manuscrito (tenedor + flor). Cliente quiere AZUL.
   Paleta: azul noche de marca + crema editorial + acento azul + oro metálico
   muy sutil (filetes/sello). Premium hotelero blue-forward.
   ========================================================================== */
:root{
  /* ---- PALETA ------------------------------------------------------------- */
  --bg:        #F1EFE8;   /* crema fría — fondo página           */
  --surface:   #FBFAF4;   /* tarjetas / paneles claros           */
  --surface-2: #E7ECF1;   /* segundo nivel (bandas) — tinte azul  */
  --text:      #15202E;   /* tinta azul-grafito                  */
  --muted:     #586475;   /* texto secundario (pizarra)          */
  --line:      rgba(21,32,46,.14);    /* bordes/divisores         */
  --line-strong: rgba(21,32,46,.28);

  --green:     #14294A;   /* AZUL NOCHE — color de marca oscuro (botones/footer/hero) */
  --green-2:   #1E456E;   /* azul medio                           */
  --gold:      #C2A14D;   /* ORO — metálico sutil (filetes, sello, CTA) */
  --gold-deep: #235A87;   /* AZUL profundo — acento de texto AA sobre claro */
  --burgundy:  #7A2B33;   /* burdeos — acento puntual            */

  --accent:    var(--gold-deep);  /* acento de texto (eyebrows/enlaces) = azul */
  --accent-2:  var(--green-2);
  --accent-ink:#FBFAF4;   /* texto SOBRE botón azul/oscuro       */

  --footer-bg:  #0F2138;
  --footer-text:#C9D4E0;

  /* ---- TIPOGRAFÍA --------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", monospace;

  /* escala fluida — Cormorant es delicada: subimos tamaños de display */
  --fs-900: clamp(3rem, 7.2vw, 6rem);     /* display hero   */
  --fs-800: clamp(2.4rem, 5vw, 4rem);     /* h2 sección     */
  --fs-700: clamp(1.7rem, 3vw, 2.5rem);   /* h3             */
  --fs-600: clamp(1.15rem,1.6vw,1.35rem); /* lead           */
  --fs-500: 1.0625rem;                     /* body           */
  --fs-400: .9375rem;                      /* small          */
  --fs-300: .78rem;                        /* caption/label  */
  --lh-tight: 1.02;
  --lh-snug:  1.22;
  --lh-body:  1.7;
  --tracking-label: .26em;                 /* labels muy espaciados (lujo) */
  --weight-display: 600;
  --weight-strong: 700;

  /* ---- ESPACIADO / RITMO ------------------------------------------------- */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem;  --space-6:4.5rem; --space-7:7rem; --space-8:10rem;
  --container: 1220px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* ---- FORMA ------------------------------------------------------------- */
  --radius-sm:4px; --radius:8px; --radius-lg:3px; --radius-pill:999px;
  --border:1px solid var(--line);
  --shadow-sm:0 2px 10px -6px rgba(33,29,22,.30);
  --shadow:   0 26px 50px -30px rgba(33,29,22,.45);
  --shadow-lg:0 50px 90px -40px rgba(33,29,22,.55);

  /* ---- MOVIMIENTO -------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.76,0,.24,1);
  --dur-fast:.25s; --dur:.5s; --dur-slow:.9s;

  /* ---- CAPAS ------------------------------------------------------------- */
  --z-nav:50; --z-overlay:80; --z-modal:100;
}