/* ============================================================
   NOCTUA CARE — DESIGN TOKENS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* --- Colores --- */
  --color-bg:           #F9F8F7;
  --color-bg-section:   #F2F0EE;
  --color-bg-card:      #FFFFFF;
  --color-white:        #FFFFFF;

  --color-primary:      #1A3A52;
  --color-accent:       #B8876B;
  --color-accent-hover: #A07560;
  --color-accent-light: #E8C5B4;
  --color-accent-pale:  #F5E8E0;

  --color-text:         #5C5C5C;
  --color-text-light:   #9A9A9A;
  --color-label:        #B8876B;

  /* --- Tipografía --- */
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.12em;

  /* --- Espaciado (escala 8px) --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* --- Border radius --- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* --- Sombras --- */
  --shadow-sm:  0 2px 8px rgba(26,58,82,0.06);
  --shadow-md:  0 4px 20px rgba(26,58,82,0.10);
  --shadow-lg:  0 8px 40px rgba(26,58,82,0.14);

  /* --- Transiciones --- */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;

  /* --- Layout --- */
  --max-width: 1300px;
  --nav-height: 108px;
}