/* ============================================================
   variables.css — Sistema de diseño Sonostar Med
   ============================================================ */
:root {
  /* ── COLORES ── */
  --color-primary:      #2E7D32;
  --color-accent:       #8DC63F;
  --color-dark:         #1A2E1A;
  --color-light:        #F4F8F0;
  --color-white:        #FFFFFF;
  --color-border:       #D4E8C2;
  --color-text:         #1A2E1A;
  --color-text-muted:   #5A7A5A;
  --color-ok:           #2E7D32;
  --color-no:           #C62828;

  /* ── TIPOGRAFÍA ── */
  --font-family:        'Inter', sans-serif;
  --font-size-xs:       11px;
  --font-size-sm:       13px;
  --font-size-base:     14px;
  --font-size-md:       16px;
  --font-size-lg:       18px;
  --font-size-xl:       20px;
  --font-size-2xl:      24px;
  --font-size-3xl:      28px;
  --font-size-4xl:      36px;
  --font-size-5xl:      44px;
  --font-size-6xl:      56px;
  --font-size-7xl:      64px;

  /* ── ESPACIADO ── */
  --spacing-xs:    8px;
  --spacing-sm:    16px;
  --spacing-md:    24px;
  --spacing-lg:    32px;
  --spacing-xl:    48px;
  --spacing-2xl:   64px;
  --spacing-3xl:   80px;
  --spacing-4xl:   96px;
  --spacing-5xl:   120px;

  /* ── LAYOUT ── */
  --container-max:     1200px;
  --container-padding: 120px;
  --navbar-height:     64px;

  /* ── EFECTOS ── */
  --border-radius-sm:  4px;
  --border-radius-md:  8px;
  --border-radius-lg:  12px;
  --border-radius-xl:  20px;
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:         0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.16);
  --transition-base:   0.2s ease;
  --transition-slow:   0.4s ease;
}