/* ============================================================
   MORRO TRAVEL — Design tokens
   Los colores salen del Manual de Marca v1.1 (muestreados del
   propio PDF, no aproximados). El teal y el azul son los dos
   colores del isotipo; el resto es la paleta de acento.
   ============================================================ */

:root {
  /* --- Marca ------------------------------------------------ */
  --teal-900: #063C3F;
  --teal-800: #084D51;
  --teal-700: #0B6469;
  --teal-600: #0E7B80;
  --teal-500: #119297; /* primario — el morro del isotipo */
  --teal-400: #2FAAAE;
  --teal-300: #6AC6C8;
  --teal-200: #BFE6E7;
  --teal-100: #E3F4F4;

  --sky-800: #0A5476;
  --sky-700: #0B6E99;
  --sky-600: #1E8CBE;
  --sky-500: #29AAE3; /* secundario — la estela y el avión */
  --sky-400: #5DBDE6;
  --sky-300: #93D4EE;
  --sky-200: #C2E7FA;
  --sky-100: #E6F5FD;

  --navy: #11526F;

  /* Teal legible sobre la superficie del momento. El 600 funciona
     sobre papel pero se queda en 3,4:1 sobre las superficies
     oscuras, así que en esquema oscuro pasa al 300. Todo lo que
     sea texto de acento usa esta variable, no el tono crudo. */
  --accent-ink: var(--teal-700);

  /* --- Acentos ---------------------------------------------- */
  --sand: #E08E45;
  --sun: #F2B705;
  --coral: #FF6B5B;

  /* --- Neutros ---------------------------------------------- */
  --paper: #F7F4EF; /* el hueso cálido del manual */
  --paper-deep: #EFEBE3;
  --white: #ffffff;
  /* Rampa de tinta. Los tres pasos se eligieron para que incluso
     el más claro llegue a 4.5:1 sobre papel: las etiquetas mono y
     los datos secundarios son texto, no decoración. */
  --ink: #3A3A3A; /* tinta del manual — 10.0:1 sobre papel */
  --ink-strong: #101D1F; /* 16.6:1 */
  --ink-soft: #5C5C5C; /* 6.5:1 */
  --ink-faint: #707070; /* 4.7:1 */
  --line: rgba(58, 58, 58, 0.12);
  --line-soft: rgba(58, 58, 58, 0.07);

  /* --- Superficies ------------------------------------------ */
  --surface: var(--white);
  --surface-sunk: var(--paper);
  --surface-dark: #06282B;
  --surface-dark-2: #0A363A;

  /* --- Gradientes ------------------------------------------- */
  --grad-brand: linear-gradient(112deg, var(--teal-500) 0%, var(--sky-500) 100%);
  --grad-brand-deep: linear-gradient(140deg, var(--teal-800) 0%, var(--sky-800) 100%);
  --grad-dusk: linear-gradient(160deg, #06282B 0%, #0B4B52 55%, #0B6E99 100%);
  --grad-sun: linear-gradient(120deg, var(--sun) 0%, var(--sand) 55%, var(--coral) 100%);

  /* --- Tipografía ------------------------------------------- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;

  /* Escala fluida: cada paso interpola entre 390px y 1600px */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.22vw, 1.06rem);
  --step-1: clamp(1.1rem, 1rem + 0.42vw, 1.32rem);
  --step-2: clamp(1.35rem, 1.15rem + 0.85vw, 1.9rem);
  --step-3: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem);
  --step-4: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --step-5: clamp(2.7rem, 1.4rem + 5.6vw, 6rem);
  --step-6: clamp(3.2rem, 1rem + 9vw, 9rem);

  --tracking-label: 0.22em;
  --tracking-tight: -0.03em;

  /* --- Espacio (ritmo de 4px) -------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section-y: clamp(72px, 9vw, 160px);
  /* Con el teléfono acostado, el margen nunca es menor que la muesca
     (viewport-fit=cover): de pie las zonas seguras laterales son 0. */
  --gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --maxw: 1440px;
  --maxw-text: 68ch;

  /* --- Radios ----------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* --- Elevación (una sola escala, luz cenital suave) -------- */
  --sh-1: 0 1px 2px rgba(6, 40, 43, 0.06), 0 2px 8px rgba(6, 40, 43, 0.04);
  --sh-2: 0 2px 4px rgba(6, 40, 43, 0.05), 0 8px 24px rgba(6, 40, 43, 0.07);
  --sh-3: 0 4px 8px rgba(6, 40, 43, 0.06), 0 18px 48px rgba(6, 40, 43, 0.1);
  --sh-4: 0 8px 16px rgba(6, 40, 43, 0.07), 0 36px 90px rgba(6, 40, 43, 0.16);
  --sh-brand: 0 12px 32px rgba(17, 146, 151, 0.28);

  /* --- Movimiento ------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 520ms;
  --t-reveal: 700ms;
  --t-split: 900ms;

  /* --- Capas ------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-nav: 60;
  --z-panel: 80;
  --z-cursor: 95;
  --z-preloader: 100;
}

/* El sitio se diseñó en claro (papel hueso). En dispositivos con
   preferencia oscura no se invierte todo: se oscurecen solo las
   superficies de papel para que el contraste siga cumpliendo AA. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B1416;
    --paper-deep: #0E1B1D;
    --white: #101E20;
    --surface: #101E20;
    --surface-sunk: #0B1416;
    --ink: #E4EDEC;
    --ink-strong: #F4F9F8;
    --ink-soft: #A9B8B7;
    --ink-faint: #7C8C8B;
    --line: rgba(228, 237, 236, 0.14);
    --line-soft: rgba(228, 237, 236, 0.08);
    --accent-ink: var(--teal-300);
    --teal-100: #0D2B2D;
    --teal-200: #12484B;
    --sky-100: #0A2130;
    --sky-200: #103A50;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.36);
    --sh-3: 0 4px 8px rgba(0, 0, 0, 0.42), 0 18px 48px rgba(0, 0, 0, 0.44);
    --sh-4: 0 8px 16px rgba(0, 0, 0, 0.45), 0 36px 90px rgba(0, 0, 0, 0.55);
  }
}