/* ============================================================
   SmartClinity — Design Tokens
   ============================================================ */

:root {
  /* ── Base Palette ── */
  --white:       #ffffff;
  --grey-50:     #f4f4f4;
  --grey-100:    #d9d9d9;
  --grey-200:    #c0c0c0;
  --grey-300:    #a0a0a0;
  --grey-500:    #6b6b6b;
  --grey-700:    #3a3a3a;
  --grey-900:    #111111;

  /* ── Accent Gradients ── */
  --grad-green-start:  #89d957;
  --grad-green-end:    #f6e658;
  --grad-blue-start:   #5170ff;
  --grad-blue-end:     #ffa3ff;

  --gradient-green: linear-gradient(135deg, #89d957, #f6e658);
  --gradient-blue:  linear-gradient(135deg, #5170ff, #ffa3ff);

  /* ── Typography ── */
  --font-main: 'Manrope', sans-serif;

  --fs-display:  clamp(3rem, 6vw, 5.5rem);
  --fs-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:       clamp(1.2rem, 2vw, 1.5rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-label:    0.75rem;

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

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

  --ls-tight:    -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;

  /* ── Spacing ── */
  --space-2:     0.125rem;
  --space-4:     0.25rem;
  --space-8:     0.5rem;
  --space-12:    0.75rem;
  --space-16:    1rem;
  --space-20:    1.25rem;
  --space-24:    1.5rem;
  --space-32:    2rem;
  --space-40:    2.5rem;
  --space-48:    3rem;
  --space-64:    4rem;
  --space-80:    5rem;
  --space-96:    6rem;
  --space-120:   7.5rem;
  --space-160:   10rem;

  /* ── Layout ── */
  --container-max:  1280px;
  --container-pad:  clamp(1.5rem, 6vw, 2.5rem);
  --section-py:     clamp(4rem, 8vw, 8rem);
  --grid-gap:       clamp(1.5rem, 3vw, 2.5rem);

  /* ── Borders & Radius ── */
  --border-thin:    1px solid var(--grey-100);
  --border-mid:     1px solid var(--grey-200);
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-full:    9999px;

  /* ── Shadows ── */
  --shadow-subtle:  0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card:    0 2px 8px rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.06);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   400ms ease;
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Nav ── */
  --nav-height: 72px;
}