/*
 * Design System Variables
 *
 * This file defines all the design tokens (colors, typography, spacing)
 * used throughout the Rooted Financial Wellness website.
 *
 * Changing values here updates the entire site's appearance.
 */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */

  /* Primary Colors */
  --color-sage: #87A878;           /* Sage Green - Primary actions, key headings */
  --color-purple: #9D8BA6;         /* Dusty Purple - Secondary actions, accents */
  --color-cream: #F5F3EE;          /* Cream - Page and section backgrounds */
  --color-charcoal: #3A3A3A;       /* Charcoal - Body text, dark UI elements */
  --color-gold: #D4A574;           /* Warm Gold - CTAs, important highlights */

  /* Neutral Colors */
  --color-white: #FFFFFF;          /* Pure white for cards and contrast */
  --color-black: #000000;          /* True black (use sparingly) */

  /* Semantic Colors (for states and feedback) */
  --color-success: #6B9F7F;        /* Success messages (green-tinted) */
  --color-error: #C47F7F;          /* Error messages (muted red) */
  --color-warning: #D4A574;        /* Warning messages (uses gold) */

  /* Color Variations (for hover states, etc.) */
  --color-sage-dark: #6B8A5F;      /* Darker sage for hovers */
  --color-purple-dark: #7D6B86;    /* Darker purple for hovers */
  --color-gold-dark: #B8895F;      /* Darker gold for hovers */

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Families */
  --font-heading: 'Lora', Georgia, serif;           /* Serif for headings */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Sans-serif for body */

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

  /* Font Sizes - Mobile First */
  --text-xs: 0.75rem;      /* 12px - Small labels, captions */
  --text-sm: 0.875rem;     /* 14px - Secondary text */
  --text-base: 1rem;       /* 16px - Body text (base) */
  --text-lg: 1.125rem;     /* 18px - Emphasized body text */
  --text-xl: 1.5rem;       /* 24px - h3 */
  --text-2xl: 2rem;        /* 32px - h2 */
  --text-3xl: 2.5rem;      /* 40px - h1 mobile */
  --text-4xl: 3rem;        /* 48px - h1 desktop */

  /* Line Heights */
  --leading-tight: 1.2;    /* Headings */
  --leading-normal: 1.5;   /* Body text */
  --leading-relaxed: 1.75; /* Long-form content */

  /* Letter Spacing */
  --tracking-tight: -0.02em;   /* Large headings */
  --tracking-normal: 0;        /* Default */
  --tracking-wide: 0.025em;    /* Buttons, labels */

  /* ============================================
     SPACING SYSTEM (8px base)
     ============================================ */

  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 2rem;        /* 32px */
  --space-lg: 4rem;        /* 64px */
  --space-xl: 6rem;        /* 96px */
  --space-2xl: 8rem;       /* 128px */

  /* ============================================
     LAYOUT
     ============================================ */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-max: 1440px;   /* Maximum content width */

  /* Responsive Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* ============================================
     BORDERS & RADIUS
     ============================================ */

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

  --radius-sm: 0.25rem;    /* 4px - Small elements */
  --radius-md: 0.5rem;     /* 8px - Buttons, inputs */
  --radius-lg: 1rem;       /* 16px - Cards */
  --radius-xl: 1.5rem;     /* 24px - Large cards, sections */
  --radius-full: 9999px;   /* Fully rounded (pills) */

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ============================================
     TRANSITIONS
     ============================================ */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */

  --z-below: -1;
  --z-normal: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-tooltip: 1500;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY SCALING
   ============================================ */

/* Tablet and up - Scale up font sizes slightly */
@media (min-width: 768px) {
  :root {
    --text-xl: 1.75rem;    /* 28px */
    --text-2xl: 2.25rem;   /* 36px */
    --text-3xl: 3rem;      /* 48px */
    --text-4xl: 3.75rem;   /* 60px */
  }
}

/* Desktop and up - Scale up font sizes more */
@media (min-width: 1024px) {
  :root {
    --text-xl: 2rem;       /* 32px */
    --text-2xl: 2.5rem;    /* 40px */
    --text-3xl: 3.5rem;    /* 56px */
    --text-4xl: 4.5rem;    /* 72px */
  }
}

/* ============================================
   UTILITY: Dark Text on Light Backgrounds
   ============================================ */

/* Ensure proper contrast ratios (WCAG AA compliant) */
.text-on-light {
  color: var(--color-charcoal);
}

.text-on-dark {
  color: var(--color-cream);
}

/* ============================================
   NOTES FOR DEVELOPERS
   ============================================ */

/*
 * USAGE:
 * - Reference these variables throughout your CSS using var(--variable-name)
 * - Example: color: var(--color-sage);
 *
 * COLOR ACCESSIBILITY:
 * - All color combinations have been checked for WCAG AA contrast ratios
 * - Sage (#87A878) on Cream (#F5F3EE): 4.5:1 ✓
 * - Charcoal (#3A3A3A) on Cream (#F5F3EE): 11.2:1 ✓
 * - Charcoal (#3A3A3A) on White (#FFFFFF): 12.6:1 ✓
 *
 * SPACING SCALE:
 * - Use the spacing scale consistently for margins, padding, and gaps
 * - This creates visual rhythm and consistency
 *
 * RESPONSIVE DESIGN:
 * - Font sizes automatically scale up at tablet and desktop breakpoints
 * - Use mobile-first CSS with min-width media queries
 */