/* NurtureKit Design System - Design Tokens Only */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* CSS Custom Properties - Available globally but not applied automatically */
:root {
  /* Color Palette - Primary */
  --nk-primary: #2ecc71;
  --nk-primary-hover: #27ae60;
  --nk-primary-light: #a9dfbf;
  --nk-primary-dark: #229954;

  /* Color Palette - Accent */
  --nk-accent: #1f3a93;
  --nk-accent-hover: #1a2f7a;
  --nk-accent-light: #5d7fcc;
  --nk-accent-dark: #162668;

  /* Color Palette - Warm Backgrounds */
  --nk-background-warm: #faf9f6;
  --nk-background-light: #f5f4ed;
  --nk-background-cream: #fdf6e3;
  --nk-background-paper: #fffef9;

  /* Sidebar specific */
  --nk-sidebar-accent: #ffffff;
  --nk-sidebar-foreground: #2c3e50;
  --nk-sidebar-border: #e5e4dd;

  /* Color Palette - Grays */
  --nk-gray-50: #f9fafb;
  --nk-gray-100: #f3f4f6;
  --nk-gray-200: #e5e7eb;
  --nk-gray-300: #d1d5db;
  --nk-gray-400: #9ca3af;
  --nk-gray-500: #6b7280;
  --nk-gray-600: #4b5563;
  --nk-gray-700: #374151;
  --nk-gray-800: #1f2937;
  --nk-gray-900: #111827;

  /* Color Palette - Semantic */
  --nk-success: #2ecc71;
  --nk-warning: #f39c12;
  --nk-error: #e74c3c;
  --nk-info: #3498db;

  /* Typography Scale */
  --nk-font-heading: 'Merriweather', serif;
  --nk-font-body: 'Open Sans', sans-serif;
  --nk-font-mono: 'Monaco', 'Courier New', monospace;

  /* Font Sizes */
  --nk-text-xs: 0.6875rem;
  --nk-text-sm: 0.75rem;
  --nk-text-base: 0.875rem;
  --nk-text-lg: 1rem;
  --nk-text-xl: 1.125rem;
  --nk-text-2xl: 1.25rem;
  --nk-text-3xl: 1.5rem;
  --nk-text-4xl: 1.875rem;
  --nk-text-5xl: 2.25rem;

  /* Line Heights */
  --nk-leading-none: 1;
  --nk-leading-tight: 1.25;
  --nk-leading-snug: 1.375;
  --nk-leading-normal: 1.5;
  --nk-leading-relaxed: 1.625;
  --nk-leading-loose: 2;

  /* Spacing Scale */
  --nk-space-0: 0;
  --nk-space-1: 0.25rem;
  --nk-space-2: 0.5rem;
  --nk-space-3: 0.75rem;
  --nk-space-4: 1rem;
  --nk-space-5: 1.25rem;
  --nk-space-6: 1.5rem;
  --nk-space-8: 2rem;
  --nk-space-10: 2.5rem;
  --nk-space-12: 3rem;
  --nk-space-16: 4rem;
  --nk-space-20: 5rem;
  --nk-space-24: 6rem;

  /* Border Radius */
  --nk-radius-none: 0;
  --nk-radius-sm: 0.25rem;
  --nk-radius-base: 0.5rem;
  --nk-radius-md: 0.625rem;
  --nk-radius-lg: 0.75rem;
  --nk-radius-xl: 1rem;
  --nk-radius-2xl: 1.5rem;
  --nk-radius-full: 9999px;

  /* Shadows */
  --nk-shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --nk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nk-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --nk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --nk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --nk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --nk-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --nk-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --nk-shadow-focus: 0 0 0 3px rgba(46, 204, 113, 0.5);

  /* Transitions */
  --nk-transition-fast: 150ms ease-in-out;
  --nk-transition-base: 200ms ease-in-out;
  --nk-transition-slow: 300ms ease-in-out;

  /* Z-index Scale */
  --nk-z-0: 0;
  --nk-z-10: 10;
  --nk-z-20: 20;
  --nk-z-30: 30;
  --nk-z-40: 40;
  --nk-z-50: 50;
  --nk-z-auto: auto;
}

/* Apply NurtureKit fonts and base styling globally but subtly */
body {
  font-family: var(--nk-font-body) !important;
  background-color: var(--nk-background-warm);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nk-font-heading) !important;
  color: var(--nk-gray-900);
}

/* Ensure main content area has proper background */
.nk-content-area {
  background-color: var(--nk-background-warm);
  min-height: 100vh;
}