/**
 * Karuna Commons - Design Tokens
 * 
 * All design values defined here. No magic numbers elsewhere.
 * Warm, earthy palette that feels approachable and caring.
 */

:root {
   /* =========================
       Colors - Warm & Earthy
       ========================= */

   /* Primary - Forest Green (trust, nature, growth) */
   --color-primary: #2d6a4f;
   --color-primary-light: #40916c;
   --color-primary-lighter: #52b788;
   --color-primary-dark: #1b4332;
   --color-primary-darker: #081c15;

   /* Secondary - Warm Tan (warmth, approachability) */
   --color-secondary: #d4a373;
   --color-secondary-light: #e9c46a;
   --color-secondary-dark: #bc6c25;

   /* Accent - Coral (calls to action, urgency for reports) */
   --color-accent: #e76f51;
   --color-accent-light: #f4a261;
   --color-accent-dark: #d62828;

   /* Neutrals */
   --color-text: #1a1a1a;
   --color-text-light: #4a4a4a;
   --color-text-muted: #6b6b6b;
   --color-text-faint: #999999;

   --color-bg: #fefefe;
   --color-bg-warm: #faf8f5;
   --color-bg-subtle: #f5f3f0;
   --color-bg-muted: #eae7e2;

   --color-border: #e5e2dd;
   --color-border-light: #f0ede8;

   /* Semantic Colors */
   --color-success: #40916c;
   --color-warning: #e9c46a;
   --color-error: #d62828;
   --color-info: #457b9d;


   /* =========================
       Typography
       ========================= */

   --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Font Sizes - Refined for mobile-first legibility */
   --text-xs: 0.8125rem;
   /* 13px - better for legal/small text on mobile */
   --text-sm: 0.9375rem;
   /* 15px - improved readability */
   --text-base: 1.0625rem;
   /* 17px - slightly larger base for humbler, easier read */
   --text-lg: 1.1875rem;
   /* 19px */
   --text-xl: 1.3125rem;
   /* 21px */
   --text-2xl: 1.625rem;
   /* 26px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 2.5rem;
   /* 40px */
   --text-5xl: 3.5rem;
   /* 56px */

   /* Font Weights */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   /* Line Heights */
   --leading-tight: 1.25;
   --leading-normal: 1.5;
   --leading-relaxed: 1.75;


   /* =========================
       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: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */


   /* =========================
       Layout
       ========================= */

   --container-max: 1280px;
   --content-max: 860px;
   /* For article text */
   --sidebar-width: 280px;


   /* =========================
       Borders & Radius
       ========================= */

   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 9999px;

   --border-width: 1px;
   --border-width-thick: 2px;


   /* =========================
       Shadows
       ========================= */

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);


   /* =========================
       Transitions
       ========================= */

   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow: 400ms ease;


   /* =========================
       Z-Index Scale
       ========================= */

   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-tooltip: 600;
}