/* Base Variables and Theme Settings */
:root {
  /* Colors */
  --primary: #0e9783;
  --primary-dark: #0a7a6a;
  --primary-light: #1fcbaf;
  --secondary: #6d6e70;
  --light: #d0d1d3;
  --white: #ffffff;
  --black: #222222;

  /* Theme Colors */
  --bg-light: #f8f9fa;
  --bg-dark: #121212;
  --card-light: #ffffff;
  --card-dark: #1e1e1e;
  --accent-light: #e9ecef;
  --accent-dark: #2a2a2a;

  /* Dark Theme Accent Colors */
  --dark-surface-1: #1e1e1e;
  --dark-surface-2: #2d2d2d;
  --dark-surface-3: #353535;
  --dark-highlight: #3a3a3a;
  --dark-border: rgba(255, 255, 255, 0.12);

  /* Light Theme Accent Colors */
  --light-surface-1: whitesmoke;
  --light-surface-2: #f8f9fa;
  --light-surface-3: #f1f3f5;
  --light-highlight: #f8f9fa;
  --light-border: rgba(0, 0, 0, 0.12);

  /* Gray Scale */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* Status Colors */
  --danger: #dc3545;
  --danger-hover: #c82333;
  --success: #28a745;
  --success-hover: #218838;
  --warning: #ffc107;
  --warning-hover: #e0a800;
  --info: #17a2b8;
  --info-hover: #138496;

  /* Typography */
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  --font-heading: "Montserrat", var(--font-primary);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --transition: all 0.3s ease;
  --border-radius: 8px;
  --top-bar-height: 60px;

  /* Grid Layout Variables */
  --team-max-columns: 2;
  --team-card-width: 350px;

  --services-max-columns: 3;
  --services-card-width: 350px;

  --projects-max-columns: 2;
  --projects-card-width: 550px;

  --gallery-max-columns: 5;
  --gallery-card-width: 33.33%;
  --gallery-min-columns: 2;
  --gallery-min-card-width: 50%;

  --max-columns: 3;
  --max-card-width: 450px;
  --min-columns: 1;
  --min-card-width: 100px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Media Queries */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (max-width: 768px) {
  :root {
    --team-card-width: 350px;
    --services-card-width: 350px;
    --projects-card-width: 350px;
    --gallery-card-width: 350px;

    --team-max-columns: 1;
    --services-max-columns: 1;
    --projects-max-columns: 1;
    --gallery-max-columns: 3;
  }
}