/* Pool Spas Nerja — tokens «Luz sobre el agua» · v0.2 · 15-sep-2026
   Derivados del brief .design/web-psn/DESIGN_BRIEF.md.
   Solo modo claro: la web es luminosa por definicion (decision de David). */

:root {
  color-scheme: light;

  /* ---- color: neutros porcelana (frios, 1 % hacia el azul) ---- */
  --color-bg-primary:      #F7F8F8;   /* pagina */
  --color-bg-secondary:    #FFFFFF;   /* superficie elevada (tarjeta, placa) */
  --color-bg-tertiary:     #EEF1F2;   /* superficie hundida (bandeja, input) */
  --color-bg-inverse:      #101519;

  --color-text-primary:    #101519;   /* tinta, 17:1 sobre porcelana */
  --color-text-secondary:  #5B6670;   /* 5,5:1 */
  --color-text-tertiary:   #6F7B85;   /* 4,5:1 — captions, placeholders */
  --color-text-inverse:    #F7F8F8;
  --color-text-link:       #0B7A8A;   /* agua profunda, 5:1 */

  --color-border-primary:  rgba(16, 21, 25, 0.10);
  --color-border-secondary:rgba(16, 21, 25, 0.06);  /* hairline */
  --color-border-focus:    #0B7A8A;

  /* ---- acento «Agua» (David): rellenos, iconos, brillo. Nunca texto sobre blanco ---- */
  --color-accent-primary:        #1BB5C9;
  --color-accent-primary-hover:  #16A3B6;
  --color-accent-primary-active: #12909F;
  --color-accent-deep:           #0B7A8A;   /* texto y enlaces */
  --color-accent-subtle:         #E6F7F9;   /* tinte de fondo */
  --color-accent-glow:           rgba(27, 181, 201, 0.28);
  --color-accent-secondary:      #E39A3B;   /* «Sol»: precio, oferta, nuevo */

  --color-status-success:  #2E9E5B;
  --color-status-warning:  #E39A3B;
  --color-status-error:    #D64545;
  --color-status-info:     #0B7A8A;

  --color-surface-overlay: rgba(247, 248, 248, 0.72);   /* velo de menu, con blur */
  --color-scrim:           rgba(16, 21, 25, 0.32);

  /* ---- espaciado: base 8, escala amplia (la web respira) ---- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --section-y: clamp(96px, 12vw, 160px);

  /* ---- tipografia: General Sans para todo ---- */
  --font-family-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-family-body:    "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-xs:   0.75rem;    /* 12 — etiquetas */
  --font-size-sm:   0.875rem;   /* 14 — captions, UI densa */
  --font-size-base: 1rem;       /* 16 — cuerpo */
  --font-size-md:   1.125rem;   /* 18 — cuerpo destacado */
  --font-size-lg:   1.375rem;   /* 22 — subtitulo */
  --font-size-xl:   clamp(1.75rem, 1.2rem + 2vw, 2.25rem);      /* 28–36 h3 */
  --font-size-2xl:  clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);     /* 36–56 h2 */
  --font-size-3xl:  clamp(3rem, 1.8rem + 5vw, 5.5rem);          /* 48–88 h1 */
  --font-size-4xl:  clamp(3.5rem, 2rem + 7vw, 8rem);            /* 56–128 display */

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:   1.02;
  --line-height-snug:    1.15;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight:  -0.03em;   /* display */
  --letter-spacing-snug:   -0.015em;  /* h2/h3 */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.18em;    /* eyebrow en mayusculas */

  /* ---- layout ---- */
  --max-width-content: 68ch;
  --max-width-wide:    1200px;
  --max-width-page:    1920px;
  --gutter: clamp(20px, 4vw, 48px);

  /* radios concentricos: exterior = interior + padding de la bandeja */
  --border-radius-sm:   10px;
  --border-radius-md:   18px;
  --border-radius-lg:   28px;
  --border-radius-xl:   40px;
  --border-radius-full: 999px;
  --bezel-pad: 8px;

  /* sombras: difusas, tintadas de tinta, casi invisibles */
  --shadow-sm:    0 1px 2px rgba(16, 21, 25, 0.04), 0 4px 12px rgba(16, 21, 25, 0.04);
  --shadow-md:    0 2px 6px rgba(16, 21, 25, 0.04), 0 18px 40px -12px rgba(16, 21, 25, 0.10);
  --shadow-lg:    0 4px 10px rgba(16, 21, 25, 0.04), 0 40px 80px -24px rgba(16, 21, 25, 0.16);
  --shadow-focus: 0 0 0 3px rgba(11, 122, 138, 0.35);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-contact: 0 60px 70px -40px rgba(16, 21, 25, 0.28);  /* producto sobre escenario */

  /* ---- movimiento: springs criticamente amortiguados, sin rebote ---- */
  --duration-instant: 60ms;
  --duration-fast:    160ms;
  --duration-normal:  280ms;
  --duration-slow:    480ms;
  --duration-slower:  800ms;

  --easing-default: cubic-bezier(0.32, 0.72, 0, 1);   /* «spring» sin overshoot */
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --easing-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  /* sin --easing-bounce: el brief prohibe el rebote */

  /* ---- breakpoints (referencia; en CSS van como literales) ---- */
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}