/* ============================================================
   Dr. Desktop — Design Tokens
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-primary:       #384D80;
  --color-primary-dark:  #26375F;
  --color-accent:        #DD405E;
  --color-accent-light:  #F06A82;
  --color-ivory:         #F8EED3;
  --color-secondary:     #4C6195;
  --color-secondary-light:#7285B5;

  --color-text:          #151A24;
  --color-text-muted:    #586272;
  --color-text-light:    #8993A3;

  --color-bg:            #FCFBF7;
  --color-surface:       #FFFFFF;
  --color-surface-warm:  #F7F5EE;
  --color-dark-section:  #090B11;
  --color-border:        rgba(21, 26, 36, 0.08);
  --color-border-hover:  rgba(21, 26, 36, 0.16);

  --color-success:       #2E7D5B;
  --color-error:         #D32F2F;
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1EBE57;

  /* ── Typography ── */
  --font-heading:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Inter', sans-serif;

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

  --fs-xs:         0.75rem;   /* 12px */
  --fs-sm:         0.875rem;  /* 14px */
  --fs-base:       1rem;      /* 16px */
  --fs-md:         1.125rem;  /* 18px */
  --fs-lg:         1.25rem;   /* 20px */
  --fs-xl:         1.5rem;    /* 24px */
  --fs-2xl:        2rem;      /* 32px */
  --fs-3xl:        2.5rem;    /* 40px */
  --fs-4xl:        3rem;      /* 48px */
  --fs-5xl:        3.5rem;    /* 56px */

  --lh-tight:      1.2;
  --lh-snug:       1.35;
  --lh-normal:     1.6;
  --lh-relaxed:    1.75;

  /* ── Spacing ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 2px rgba(27, 36, 48, 0.04);
  --shadow-card:  0 1px 3px rgba(27, 36, 48, 0.06), 0 8px 24px rgba(27, 36, 48, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(27, 36, 48, 0.08), 0 16px 40px rgba(27, 36, 48, 0.06);
  --shadow-elevated: 0 8px 32px rgba(27, 36, 48, 0.12);
  --shadow-cta-glow: 0 4px 20px rgba(221, 64, 94, 0.28);
  --shadow-nav:  0 1px 3px rgba(27, 36, 48, 0.05);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Container ── */
  --container-max: 1280px;
  --container-padding: 24px;

  /* Compatibility aliases used by existing page markup */
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);
  --space-20: var(--sp-20);
  --space-24: var(--sp-24);
  --space-30: var(--sp-30);
  --fs-hero: clamp(3.75rem, 8vw, 7.5rem);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-elevated);
  --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  --z-nav: 1000;
  --z-modal: 2000;
  --z-sticky: 1500;
  --color-accent-dark: #B92D49;
  --color-dark-section-text: #D8DEEC;
}

@media (max-width: 640px) {
  :root {
    --container-padding: 16px;
  }
}