/* ==========================================================================
   LA BOTICA ALHAURÍN — Design tokens
   Dirección artística: "Botica Contemporánea" — herbolario/farmacia clásica
   reinterpretada en clave de brunch-bar mediterráneo. Verde botica profundo,
   crema pergamino y latón envejecido; tipografía editorial de etiqueta
   farmacéutica combinada con una sans humanista para el cuerpo de texto.
   ========================================================================== */

:root {
  /* ---- Color: verde botica (primario) ---- */
  --color-botica-900: #0F2A20;
  --color-botica-800: #15392B;
  --color-botica-700: #1C4A38;
  --color-botica-600: #276149;
  --color-botica-500: #35785C;

  /* ---- Color: crema pergamino (superficies) ---- */
  --color-cream-50:  #FCFAF3;
  --color-cream-100: #F6EEDC;
  --color-cream-200: #EFE3C8;

  /* ---- Color: latón / dorado (acento frío, sobre verde) ---- */
  --color-brass-400: #D8BD84;
  --color-brass-500: #C6A159;
  --color-brass-600: #A9813F;

  /* ---- Color: terracota (acento cálido, CTA) ---- */
  --color-terracotta-500: #C1502E;
  --color-terracotta-600: #A43F22;

  /* ---- Neutros / tinta ---- */
  --color-ink-900: #14211B;
  --color-ink-700: #33453C;
  --color-ink-500: #5C6F64;
  --color-white: #FFFFFF;

  /* ---- Semántico ---- */
  --color-bg: var(--color-cream-50);
  --color-bg-alt: var(--color-cream-100);
  --color-surface: var(--color-white);
  --color-text: var(--color-ink-900);
  --color-text-soft: var(--color-ink-700);
  --color-text-muted: var(--color-ink-500);
  --color-primary: var(--color-botica-800);
  --color-primary-strong: var(--color-botica-900);
  --color-accent: var(--color-brass-500);
  --color-cta: var(--color-terracotta-500);
  --color-cta-hover: var(--color-terracotta-600);
  --color-border: rgba(20, 33, 27, 0.12);
  --color-border-inverse: rgba(246, 238, 220, 0.22);

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --text-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.55rem + 1vw, 2.375rem);
  --text-3xl:  clamp(2.1rem, 1.8rem + 1.5vw, 3.25rem);
  --text-4xl:  clamp(2.75rem, 2.2rem + 2.7vw, 4.75rem);
  --text-hero: clamp(3.4rem, 2.4rem + 5vw, 7.5rem);

  /* ---- Espaciado ---- */
  --space-section: clamp(4.5rem, 4rem + 3vw, 8rem);
  --space-section-sm: clamp(3rem, 2.6rem + 2vw, 5rem);
  --container-max: 1220px;
  --container-pad: clamp(1.25rem, 1rem + 2.5vw, 3rem);

  /* ---- Forma ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow-soft: 0 1px 2px rgba(20,33,27,0.06), 0 12px 32px -12px rgba(20,33,27,0.18);
  --shadow-lift: 0 24px 48px -16px rgba(20,33,27,0.28);

  /* ---- Movimiento ---- */
  --ease-premium: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.25s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}