/* hollandairy — design tokens (derivados del logo) */
:root {
  color-scheme: light;

  /* Azul — color de marca (gota). Superficies grandes y acciones primarias */
  --blue-950: #0d2150;
  --blue-800: #1a43a8;
  --blue-700: #1f52c4;
  --blue-600: #265bd7; /* logo · blanco encima 5.9:1 */
  --blue-500: #3579d4; /* logo */
  --blue-100: #e2ecfb;
  --blue-50:  #f1f6fe;

  /* Ámbar — una sola acción principal por vista */
  --amber-600: #c98a1f;
  --amber-500: #e6b43d; /* logo · texto Ink encima 8.5:1 */
  --amber-400: #eec25f;
  --amber-100: #fcf1d4;

  /* Verde — sustentabilidad, confirmaciones */
  --green-800: #2b6a1c; /* verde para texto · 6.6:1 sobre blanco */
  --green-600: #428a2b; /* logo */
  --green-500: #69bb44; /* logo */
  --green-100: #e5f3de;

  /* Neutros con matiz azul */
  --ink:     #0f1f3d;
  --slate:   #4a5870;
  --line:    #dde4ee;
  --surface: #f6f7f5;
  --white:   #ffffff;

  /* Semánticos */
  --color-bg: var(--white);
  --color-bg-soft: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--slate);
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-accent: var(--amber-500);
  --color-success: var(--green-800);
  --color-border: var(--line);
  --color-focus: var(--amber-500);

  /* Degradados: solo para superficies, nunca para texto */
  --grad-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 60%, var(--green-600) 140%);
  --grad-hero: linear-gradient(165deg, var(--blue-950) 0%, var(--blue-800) 70%, var(--blue-700) 100%);

  /* Tipografía */
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  /* Escala (fluida) */
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-h3: 1.375rem;
  --text-offer: clamp(1.6rem, 2.4vw, 2.125rem);
  --text-h2: clamp(2.125rem, 4vw, 3.125rem);
  --text-h1: clamp(2.75rem, 6.2vw, 4.875rem);

  /* Espaciado */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  /* Forma y elevación (borde o sombra, nunca ambos) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --shadow-md: 0 10px 30px -8px rgba(15, 31, 61, .18), 0 2px 6px rgba(15, 31, 61, .06);

  /* Movimiento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-enter: 520ms;
}