/* ==========================================================================
   Mar de Sol — tokens de diseño
   Paleta derivada del logo: azul noche, naranja de atardecer, oro y mar.
   ========================================================================== */

:root {
  /* ---- Superficies oscuras (identidad principal) ---- */
  --ink:          oklch(0.13 0.045 262);   /* fondo más profundo   */
  --navy-950:     oklch(0.17 0.055 261);   /* fondo de sección     */
  --navy-900:     oklch(0.21 0.062 261);
  --navy-800:     oklch(0.25 0.064 261);   /* tarjetas             */
  --navy-700:     oklch(0.30 0.062 260);   /* tarjeta elevada      */
  --navy-600:     oklch(0.37 0.058 258);   /* bordes visibles      */

  /* ---- Superficies claras (secciones de contraste) ---- */
  --shell:        oklch(0.968 0.006 250);
  --shell-2:      oklch(0.930 0.010 248);
  --shell-line:   oklch(0.865 0.014 250);

  /* ---- Acentos de marca ---- */
  --sunset:       oklch(0.685 0.196 42);   /* naranja del logo     */
  --sunset-hi:    oklch(0.745 0.176 52);
  --gold:         oklch(0.855 0.150 84);   /* amarillo del sol     */
  --gold-deep:    oklch(0.780 0.155 72);
  --sea:          oklch(0.660 0.132 244);  /* azul de la ola       */
  --sea-hi:       oklch(0.775 0.108 219);

  /* ---- Texto ---- */
  --on-dark:      oklch(0.975 0.010 85);
  --on-dark-mid:  oklch(0.815 0.020 250);
  --on-dark-low:  oklch(0.680 0.024 252);
  --on-light:     oklch(0.235 0.045 262);
  --on-light-mid: oklch(0.455 0.030 258);

  /* ---- Semánticos ---- */
  --danger:       oklch(0.640 0.200 25);
  --danger-soft:  oklch(0.720 0.150 28);
  --ok:           oklch(0.740 0.140 155);

  /* ---- Líneas y sombras ---- */
  --line:         oklch(1 0 0 / 0.10);
  --line-strong:  oklch(1 0 0 / 0.18);
  --shadow-sm:    0 1px 2px oklch(0.10 0.04 262 / 0.35);
  --shadow-md:    0 8px 24px -8px oklch(0.10 0.04 262 / 0.55);
  --shadow-lg:    0 24px 60px -20px oklch(0.08 0.04 262 / 0.70);
  --shadow-glow:  0 10px 30px -12px oklch(0.685 0.196 42 / 0.55);

  /* ---- Radios ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0:  clamp(0.94rem, 0.91rem + 0.16vw, 1rem);
  --step-1:  clamp(1.06rem, 1.00rem + 0.30vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.12rem + 0.62vw, 1.62rem);
  --step-3:  clamp(1.50rem, 1.26rem + 1.15vw, 2.25rem);
  --step-4:  clamp(1.85rem, 1.40rem + 2.20vw, 3.20rem);
  --step-hero: clamp(2.05rem, 1.10rem + 4.65vw, 5.30rem);

  /* ---- Ritmo ---- */
  --gutter: 1rem;
  --section-y: 2.6rem;
  --maxw: 1220px;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0.9, 0.30, 1);
  --t-fast: 140ms;
  --t-mid: 220ms;
  --t-slow: 300ms;

  /* ---- Capas (z-index semántico) ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 60;
  --z-header: 70;
  --z-dock: 80;
  --z-overlay: 90;
  --z-panel: 100;
  --z-toast: 120;

  /* ---- Alturas de cromo ---- */
  --header-h: 64px;
  --dock-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 900px) {
  :root {
    --gutter: 2rem;
    --section-y: 5.5rem;
    --header-h: 76px;
    --dock-h: 0px;
  }
}