/* ==========================================================================
   Espacios Azahar — Design Tokens
   Variables base. NO escribir reglas aquí, solo custom properties.
   ========================================================================== */

:root {
  /* ---------- Color: marca ---------- */
  --color-primary: #6B4A2B;        /* Marrón logo */
  --color-primary-700: #543719;
  --color-primary-300: #B08968;
  --color-primary-100: #E8D9C5;

  --color-accent: #7A8B6F;         /* Verde salvia */
  --color-accent-700: #5C6E52;
  --color-accent-300: #C4D1B8;

  /* ---------- Color: superficies ---------- */
  --color-bg: #FAF6F0;             /* Crema (fondo general) */
  --color-bg-soft: #F2EBDF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FBF7F1;
  --color-line: #E7DFD3;
  --color-line-strong: #D6C8B3;

  /* ---------- Color: texto ---------- */
  --color-ink: #2B2118;            /* Marrón muy oscuro */
  --color-ink-soft: #5A4A3D;
  --color-ink-muted: #8B7B6C;
  --color-ink-on-primary: #FAF6F0;

  /* ---------- Estado ---------- */
  --color-success: #4F7A4F;
  --color-warning: #B8893E;
  --color-error: #A04A3A;
  --color-focus: #B08968;

  /* ---------- Tipografía ---------- */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala fluida (clamp(min, prefer, max)) */
  --fs-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12 → 13 */
  --fs-sm:    clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14 → 15 */
  --fs-base:  clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);       /* 16 → 17 */
  --fs-md:    clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);     /* 18 → 20 */
  --fs-lg:    clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);       /* 20 → 24 */
  --fs-xl:    clamp(1.5rem, 1.35rem + 0.8vw, 2rem);          /* 24 → 32 */
  --fs-2xl:   clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);      /* 30 → 44 */
  --fs-3xl:   clamp(2.25rem, 1.85rem + 2vw, 3.5rem);         /* 36 → 56 */
  --fs-4xl:   clamp(2.75rem, 2.15rem + 3vw, 4.5rem);         /* 44 → 72 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.65;
  --lh-loose: 1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---------- Espaciado (escala 4) ---------- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* Espaciado vertical de secciones (responsive) */
  --section-y: clamp(3.5rem, 6vw, 7rem);

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  --header-h: 84px;
  --topbar-h: 38px;

  /* ---------- Radios ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 1px 2px rgba(43, 33, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(43, 33, 24, 0.06), 0 1px 2px rgba(43, 33, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(43, 33, 24, 0.08), 0 2px 6px rgba(43, 33, 24, 0.04);
  --shadow-lg: 0 24px 48px rgba(43, 33, 24, 0.12), 0 6px 12px rgba(43, 33, 24, 0.06);
  --shadow-focus: 0 0 0 3px rgba(176, 137, 104, 0.35);

  /* ---------- Transiciones ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* Breakpoints (referencia, usados con @media)
   sm: 640px · md: 768px · lg: 1024px · xl: 1280px · 2xl: 1440px */