/**
 * Theme Variables - CUSTOMIZE PER CLIENT
 * =====================================
 *
 * This file defines client-specific branding. It is loaded FIRST so that
 * core styles (base.css) can reference these variables.
 *
 * CSS Loading Order (defined in base_head.njk):
 * 1. Bootstrap CSS (framework defaults)
 * 2. theme/variables.css (THIS FILE - brand colors, fonts)
 * 3. core/base.css (shared styles using theme variables)
 * 4. theme/overrides.css (client-specific tweaks)
 * 5. Page-specific CSS (optional)
 *
 * TO CUSTOMIZE FOR A NEW CLIENT:
 * 1. Replace --theme-primary with client's brand color
 * 2. Update --theme-font-primary and --theme-font-body
 * 3. Update @import for any custom Google Fonts
 * 4. Adjust dark mode colors if needed
 *
 * Bootstrap Fallback Strategy:
 * For template defaults, use var(--bs-*, fallback) pattern:
 *   --theme-primary: var(--bs-primary, #0d6efd);
 * This ensures the template works even without customization.
 *
 * Current Client: Collab.Ventures
 * Brand: Teal (#2a8e70) with green accent (#03ed96)
 * Fonts: Poppins (headings) + Varela Round (body)
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Varela+Round&display=swap');

:root {
  /* Primary brand color - Teal */
  --theme-primary: #2a8e70;
  --theme-primary-hover: #238b6a;
  --theme-primary-light: rgba(42, 142, 112, 0.1);

  /* Accent color - Bright green */
  --theme-accent: #03ed96;

  /* Typography */
  --theme-font-primary: 'Poppins', sans-serif;
  --theme-font-body: 'Varela Round', sans-serif;

  /* Text colors */
  --theme-text-primary: #333333;
  --theme-text-muted: #808080;

  /* Backgrounds */
  --theme-bg-body: #f2f2f2;
  --theme-bg-card: #ffffff;
  --theme-bg-surface: #f8f9fb;

  /* Borders */
  --theme-border-color: #dee2e6;

  /* Logo sizing — controls navbar logo height; width is auto to preserve aspect ratio */
  --theme-logo-height: 48px;

  /* Elevation - Layered shadow scale for depth hierarchy */
  --theme-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --theme-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
  --theme-primary: #4dd4a8;
  --theme-primary-hover: #5ee8bc;
  --theme-primary-light: rgba(77, 212, 168, 0.15);
  --theme-accent: #03ed96;
  --theme-bg-body: #1a2332;
  --theme-bg-card: #243040;
  --theme-bg-surface: #2a3648;
  --theme-border-color: #3d5060;
  --theme-text-primary: #f0f4f8;
  --theme-text-muted: #b8c4d4;

  /* Secondary - for links and accents */
  --theme-secondary: #5ee8bc;

  /* Elevation - border luminosity + glow for dark backgrounds */
  --theme-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.6);
  --theme-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.5);
  --theme-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.6);
  --theme-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.7);
  --theme-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.7);
}