/* Nomads RTW — design tokens
   Generated from the design system's tokens.json. This file is the only place
   a colour, size or spacing value is defined. Nothing else in the theme may
   contain a raw hex, px font-size or px gap: use the custom properties below.

   The brand aqua is #6cdbc5 (20 Sep 2026: the logo files are monochrome, so the
   only colour the brand ever used is Avada's primary_color). It is too light for
   text on the light theme, so per HANDOFF.md it lives at full strength in the
   dark theme and as darkened steps of the same hue (168deg) in the light one.
   The six accent tokens plus the two focus tokens change together. */

:root {
  /* Surfaces */
  --surface-page: #faf8f4;
  --surface-raised: #ffffff;
  --surface-sunken: #f2ede5;
  --surface-inverse: #1a1815;

  /* Ink */
  --ink: #1b1a17;
  --ink-muted: #575046;
  --ink-faint: #6e685b;
  --ink-inverse: #f2ede4;
  --ink-on-media: #ffffff;

  /* Accent — the brand aqua #6cdbc5 (see design-system/tokens.json).
     Light theme darkens it to clear 4.5:1; dark theme uses it as it is. */
  --accent: #1e7967;          /* aqua a fuerza de texto: enlaces y UI pequeña */
  --accent-strong: #175e50;
  --accent-bright: #6cdbc5;   /* EL aqua de la marca: filetes, rellenos, marcas */
  --accent-figure: #1e7967;   /* numerales y titulares en aqua, que sí se leen */
  --on-accent-bright: #12201e;
  --accent-soft: #e1f4f0;
  --on-accent: #faf8f4;
  --accent-inverse: #6cdbc5;

  /* Lines */
  --line-hairline: #e6e0d5;
  --line-strong: #c9c1b2;
  --line-control: #8a8375;

  /* Focus and overlays */
  --focus: #1e7967;
  --focus-inverse: #6cdbc5;
  --scrim: rgba(18, 16, 13, 0.55);
  /* The hero carries a headline over a photograph that can be very pale. A
     wash that deepens towards the text keeps the picture open at the top and
     the words solid where they sit. Never a text shadow. */
  /* 20-09-2026, cuarta pasada: el velo llegaba al 47% a la altura del
     antetítulo del hero de portada, por debajo del 55% que pide el §4, y sobre
     el cielo de la foto de playa el aqua daba 2.19. La rampa sube ahora antes,
     de modo que todo el bloque de texto del hero cae por encima del 72%.
     Medido después sobre esa misma foto: antetítulo 4.91, subtítulo 9.6,
     titular 6.0. La mitad de arriba de la foto sigue abierta. */
  --scrim-hero: linear-gradient(to bottom,
                rgba(18, 16, 13, 0.24) 0%,
                rgba(18, 16, 13, 0.34) 26%,
                rgba(18, 16, 13, 0.74) 46%,
                rgba(18, 16, 13, 0.90) 100%);
  --scrim-strong: rgba(18, 16, 13, 0.70);   /* tile hover only */
  /* A tile carries its name at the bottom: the wash deepens there and leaves
     the photograph open above it. */
  --scrim-tile: linear-gradient(to bottom,
                rgba(18, 16, 13, 0.06) 0%,
                rgba(18, 16, 13, 0.22) 52%,
                rgba(18, 16, 13, 0.82) 100%);
  --scrim-tile-hover: linear-gradient(to bottom,
                rgba(18, 16, 13, 0.22) 0%,
                rgba(18, 16, 13, 0.42) 52%,
                rgba(18, 16, 13, 0.88) 100%);
  --hairline-on-media: rgba(255, 255, 255, 0.28);
  --shadow-sheet: 0 -2px 16px rgba(18, 16, 13, 0.16);
  --hairline-inverse: rgba(255, 255, 255, 0.14);

  /* Type families — self-hosted, see functions.php */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-text: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale — desktop. Mobile values live in the 768px block of nomads.css */
  --display-0: 88px;      /* cover headline, once on the site. Approved 20-09-2026 */
  --display-0-lh: 84px;
  --display-1: 64px;  --display-1-lh: 62px;
  --display-2: 48px;  --display-2-lh: 52px;
  --display-3: 36px;  --display-3-lh: 42px;
  --h2: 30px;         --h2-lh: 38px;
  --h3: 23px;         --h3-lh: 30px;
  --card-title: 26px; --card-title-lh: 31px;
  --quote: 27px;      --quote-lh: 38px;
  --lede: 21px;       --lede-lh: 34px;
  --body: 19px;       --body-lh: 32px;
  --body-compact: 17px; --body-compact-lh: 28px;
  --small: 15px;      --small-lh: 24px;
  --eyebrow: 12px;    --eyebrow-lh: 16px;
  --meta: 14px;       --meta-lh: 20px;
  --caption: 14px;    --caption-lh: 20px;
  --button: 15px;     --button-lh: 16px;
  --nav: 15px;        --nav-lh: 20px;

  /* Component type — one-off sizes that belong to a single component.
     They live here so nothing in nomads.css carries a raw px size (rule 2 of
     HANDOFF.md). Mobile values are in the 768px block of nomads.css. */
  --wordmark: 28px;       --wordmark-lh: 32px;
  --wordmark-rtw: 13px;   --wordmark-rtw-lh: 16px;
  --statement: 32px;      --statement-lh: 46px;
  --headline-card: 44px;  --headline-card-lh: 48px;   /* lead card and feature tile */
  --guide-title: 80px;    --guide-title-lh: 76px;     /* PDF landing, once */
  --statpanel-num: 40px;  --statpanel-num-lh: 44px;
  --ranked-num: 28px;     --ranked-num-lh: 30px;
  --dropcap: 86px;        --dropcap-lh: 68px;
  --minicover: 19px;      --minicover-lh: 23px;
  --faq-sign: 22px;
  --lede-tight-lh: 27px;  /* lede on two lines: coverlines, ranked titles */
  --tile-name-lh: 28px;
  --nav-tight-lh: 22px;
  --facts-num-lh: 40px;
  /* Titular de la tarjeta «Start here» del destino: 40/46 en el diseño
     aprobado (reference/destino.html). El alto de línea ya estaba; faltaba el
     tamaño y se usaba --display-3 (36px). */
  --lead-card: 40px;
  --lead-card-lh: 46px;
  --pdfcover-lh: 25px;

  /* Spacing — 4px base */
  --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 */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Layout */
  --measure-text: 700px;
  --measure-media: 1080px;
  --measure-page: 1440px;
  --gutter-mobile: 20px;
  --gutter-desktop: 40px;
  --wordmark-w: 132px;
  /* El logotipo actual es un PNG con el tipi POR ENCIMA de las letras: ocupa
     con él las dos terceras partes de su altura (las letras van de la fila 184
     a la 250 de 253). Centrar su caja en la cabecera dejaba las letras NOMADS
     por debajo de la línea del menú, que es lo que se veía. Esto sube la imagen
     hasta que el bloque de letras queda centrado en la fila, medido contra el
     menú y el botón. El SVG del 21-sep sale del mismo original y conserva el
     tipi: su bloque de letras cae en el mismo sitio (20,2px frente a 20,1 a
     132px de ancho), así que el mismo valor vale para los dos. */
  --wordmark-rise: 22px;
  --sheet-h: 56px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 120ms;
  --t-med: 300ms;
}

/* Dark theme. Delete this whole block if the buyer does not want dark mode —
   nothing else depends on it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #1a1815;
    --surface-raised: #232019;
    --surface-sunken: #14120f;
    --surface-inverse: #f2ede4;
    --ink: #f2ede4;
    --ink-muted: #b8b0a2;
    --ink-faint: #968e80;
    --ink-inverse: #1a1815;
    --accent: #6cdbc5;
    --accent-strong: #99e6d7;
    --accent-bright: #6cdbc5;
    --accent-figure: #8fe5d4;
    --on-accent-bright: #0f1f1c;
    --accent-soft: #1b3731;
    --on-accent: #0f1f1c;
    --accent-inverse: #1e7967;
    --line-hairline: #302c25;
    --line-strong: #454037;
    --line-control: #8a8274;
    --focus: #6cdbc5;
    --focus-inverse: #1e7967;
    --shadow-sheet: 0 -2px 16px rgba(0, 0, 0, 0.44);
  }
}

:root[data-theme="dark"] {
  --surface-page: #1a1815;
  --surface-raised: #232019;
  --surface-sunken: #14120f;
  --surface-inverse: #f2ede4;
  --ink: #f2ede4;
  --ink-muted: #b8b0a2;
  --ink-faint: #968e80;
  --ink-inverse: #1a1815;
  --accent: #6cdbc5;
  --accent-strong: #99e6d7;
  --accent-bright: #6cdbc5;
  --accent-figure: #8fe5d4;
  --on-accent-bright: #0f1f1c;
  --accent-soft: #1b3731;
  --on-accent: #0f1f1c;
  --accent-inverse: #1e7967;
  --line-hairline: #302c25;
  --line-strong: #454037;
  --line-control: #8a8274;
  --focus: #6cdbc5;
  --focus-inverse: #1e7967;
  --shadow-sheet: 0 -2px 16px rgba(0, 0, 0, 0.44);
}