/* ============================================
   variables.css — Design tokens & CSS custom
   properties for the CareConnect theme
   ============================================ */

:root {
  /* ── Color Palette ── */
  --color-forest:       #1a3a2a;   /* Primary dark green  */
  --color-forest-mid:   #2d5a3d;   /* Medium forest green */
  --color-moss:         #4a7c59;   /* Moss green          */
  --color-sage:         #7aaa8a;   /* Sage green          */
  --color-mint:         #a8d5b5;   /* Mint green          */
  --color-dew:          #d4ede0;   /* Lightest green      */
  --color-cream:        #f5f0e8;   /* Warm cream bg       */
  --color-white:        #ffffff;
  --color-text-dark:    #1a3a2a;
  --color-text-muted:   #5a7060;
  --color-text-light:   #a8d5b5;

  /* ── CableTow Care Brand Colors ── */
  --color-brand-orange: #e85714;   /* Brand orange        */
  --color-brand-bg:     #fefefe;   /* Background          */
  --color-brand-green:  #4ba402;   /* Brand green         */
  --color-brand-blue:   #0349c8;   /* Brand blue          */

  /* ── Typography ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  --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:   clamp(1.5rem, 4vw, 2rem);       /* 32px  */
  --fs-3xl:   clamp(2rem, 5vw, 2.5rem);     /* 40px  */
  --fs-4xl:   clamp(2.5rem, 6vw, 3rem);       /* 48px  */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Spacing ── */
  --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-8:   2rem;      /* 32px */
--space-10: clamp(1.5rem, 4vw, 2.5rem);
  --space-12: clamp(2rem, 5vw, 3rem);
  --space-16: clamp(2rem, 6vw, 4rem);
  --space-20: clamp(3rem, 8vw, 5rem);
  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(26, 58, 42, 0.07);
  --shadow-md:  0 8px 24px rgba(26, 58, 42, 0.10);
  --shadow-lg:  0 20px 60px rgba(26, 58, 42, 0.14);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Layout ── */
  --container-max: min(1200px, 95vw);
  --nav-height:    70px;
}