/* Sistema de diseño y variables globales */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;700&family=Playfair+Display:wght@500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap");

:root {
  /* Sistema de identidad – lujo silencioso */
  --azul-zafiro: #102a43;       /* Fondo principal de autoridad */
  --oro-champagne: #c5a880;     /* Nombre Dra., menú y botones */
  --beige-cashmere: #f5f2eb;   /* Fondos humanización y planes */
  --blanco-perla: #f8f9fa;     /* Texto sobre fondo azul */

  /* Aliases para compatibilidad */
  --color-azul-base: var(--azul-zafiro);
  --color-champagne: var(--oro-champagne);
  --color-beige: var(--beige-cashmere);
  --color-primary: var(--azul-zafiro);
  --color-secondary: #0b1622;
  --color-background: var(--azul-zafiro);
  --color-accent: var(--oro-champagne);
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey-100: #e9ecef;
  --color-grey-200: #dee2e6;
  --color-grey-700: #495057;
  --color-text-main: var(--blanco-perla);
  --color-text-desc: #e2e8f0;

  /* Tipografía */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  /* Escala tipográfica base (mobile first) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  --font-size-display: 2.4rem;

  /* Espaciado */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* Bordes y sombras */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 18px 45px rgba(0, 0, 0, 0.16);

  /* Anchos */
  --container-max-width: 1120px;
  --header-height: 100px;

  /* Transiciones */
  --transition-fast: 150ms ease-out;
  --transition-normal: 220ms ease-out;
}

@media (min-width: 768px) {
  :root {
    --font-size-display: 3rem;
    --font-size-xxl: 2.25rem;
  }
}