/**
 * Theme Configuration — Customize the entire website from this file
 * Update variables below to change typography, colors, spacing, and component styles
 */

:root {
  /* ===== TYPOGRAPHY ===== */
  --font-family-base: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-heading: "Questrial", sans-serif;
  --font-family-nav: "Noto Sans", sans-serif;

  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;

  --line-height-base: 1.6;
  --line-height-heading: 1.2;
  --line-height-tight: 1.4;

  /* ===== COLOR PALETTE ===== */
  /* Primary Colors */
  --color-primary: #0066cc;
  --color-primary-dark: #004499;
  --color-primary-light: #3399ff;

  /* Neutral Colors */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-text-primary: #1a2332;
  --color-text-secondary: #4a5f7f;
  --color-text-light: #7a8fa6;
  --color-heading: #0d1b2a;
  --color-border: #d4dce5;

  /* Dark Mode Colors (optional) */
  --color-dark-background: #060606;
  --color-dark-surface: #252525;
  --color-dark-text: #ffffff;

  /* Status Colors */
  --color-success: #16a34a;
  --color-error: #dc2626;
  --color-warning: #ea580c;
  --color-info: #0066cc;

  /* Light Background Variant */
  --color-light-background: #f0f6fb;

  /* ===== SPACING ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  --gap-container: 2rem;
  --gap-section: 1.25rem;
  --gap-column: 2rem;

  /* ===== BORDER & RADIUS ===== */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;
  --border-radius-pill: 50px;

  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 3px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0px 2px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0px 20px 40px rgba(0, 0, 0, 0.2);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* ===== BREAKPOINTS (for reference in comments) ===== */
  /* Mobile: < 576px */
  /* Tablet: 577px - 768px */
  /* Small Desktop: 769px - 1199px */
  /* Large Desktop: >= 1200px */
  /* Extra Large: >= 1400px */

  /* ===== COMPONENT SPECIFIC ===== */
  
  /* Header */
  --header-height: auto;
  --header-background: var(--color-background);
  --header-text-color: var(--color-text-primary);
  --header-padding: 20px 0;
  --header-container-bg: var(--color-surface);
  --header-container-border-radius: 50px;
  --header-container-shadow: var(--shadow-md);

  /* Navigation */
  --nav-link-color: var(--color-text-primary);
  --nav-link-hover-color: var(--color-primary);
  --nav-dropdown-bg: var(--color-surface);
  --nav-mobile-bg: var(--color-surface);
  --nav-border-radius: 6px;

  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: var(--color-primary-dark);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-primary);
  --btn-secondary-border: var(--color-primary);
  --btn-padding: 12px 28px;
  --btn-border-radius: var(--border-radius-md);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-transition: var(--transition-base);

  /* Cards */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-border-radius: var(--border-radius-lg);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--spacing-xl);
  --card-hover-shadow: var(--shadow-lg);

  /* Section */
  --section-padding: 60px 0;
  --section-spacing: var(--spacing-3xl);
  --section-title-size: 36px;
  --section-title-weight: var(--font-weight-bold);

  /* Portfolio Grid */
  --portfolio-columns: 2;
  --portfolio-column-gap: var(--gap-column);
  --portfolio-item-gap: var(--spacing-xl);

  /* Forms */
  --form-input-bg: var(--color-surface);
  --form-input-border: var(--color-border);
  --form-input-border-radius: var(--border-radius-md);
  --form-input-padding: 12px 16px;
  --form-input-focus-border: var(--color-primary);
  --form-input-focus-shadow: 0 0 0 3px rgba(232, 117, 50, 0.1);

  /* Footer */
  --footer-bg: var(--color-background);
  --footer-text: var(--color-text-primary);
  --footer-link-hover: var(--color-primary);
}

/* ===== LIGHT BACKGROUND VARIANT ===== */
.light-background {
  --color-background: var(--color-light-background);
  --color-surface: #ffffff;
}

/* ===== DARK BACKGROUND VARIANT ===== */
.dark-background {
  --color-background: var(--color-dark-background);
  --color-text-primary: var(--color-dark-text);
  --color-heading: var(--color-dark-text);
  --color-surface: var(--color-dark-surface);
  --color-border: rgba(255, 255, 255, 0.1);
  --form-input-bg: var(--color-dark-surface);
  --form-input-border: rgba(255, 255, 255, 0.1);
  --nav-dropdown-bg: var(--color-dark-surface);
  --nav-mobile-bg: var(--color-dark-surface);
  --card-bg: var(--color-dark-surface);
}

/* ===== THEME VARIANTS (Optional: Add more theme presets) ===== */

/* Modern Minimal Theme */
.theme-minimal {
  --color-primary: #2c3e50;
  --color-primary-dark: #1a252f;
  --color-primary-light: #34495e;
  --font-family-heading: "Inter", sans-serif;
  --section-title-size: 42px;
  --border-radius-lg: 2px;
  --shadow-md: 0px 1px 3px rgba(0, 0, 0, 0.08);
}

/* Vibrant Theme */
.theme-vibrant {
  --color-primary: #ff6b35;
  --color-primary-dark: #f7303c;
  --color-primary-light: #ff8c42;
  --color-success: #00d4aa;
  --color-warning: #ffd166;
  --section-title-size: 48px;
  --border-radius-lg: 16px;
  --shadow-md: 0px 4px 20px rgba(255, 107, 53, 0.15);
}

/* Professional Theme */
.theme-professional {
  --color-primary: #003d82;
  --color-primary-dark: #002850;
  --color-primary-light: #0052b3;
  --color-heading: #003d82;
  --font-family-base: "Georgia", serif;
  --font-weight-semibold: 600;
  --section-title-size: 40px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  :root {
    --font-size-base: 15px;
    --section-padding: 40px 0;
    --section-title-size: 28px;
    --spacing-xl: 1.5rem;
    --gap-section: 1rem;
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-base: 14px;
    --section-padding: 30px 0;
    --section-title-size: 24px;
    --spacing-xl: 1rem;
    --gap-section: 0.75rem;
    --portfolio-columns: 1;
  }
}