:root {
  /* Colors */
  --bg-color: #ecf0f3;
  --text-main: #44476a;
  --text-light: #7a7c93;
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  --white: #ffffff;

  /* Neumorphic Shadows */
  --shadow-light: #ffffff;
  --shadow-dark: #d1d9e6;

  /* Typography */
  --font-main: 'Inter', sans-serif;

  /* Spacing & Layout */
  --container-width: 1200px;
  --border-radius: 20px;
  
  /* Transitions */
  --transition-speed: 0.3s;
}

/* Neumorphic Utilities via Mixin-like classes (to be applied in style.css or HTML) */
.neu-flat {
  background: var(--bg-color);
  box-shadow: 
    9px 9px 16px var(--shadow-dark), 
    -9px -9px 16px var(--shadow-light);
  border-radius: var(--border-radius);
}

.neu-pressed {
  background: var(--bg-color);
  box-shadow: 
    inset 6px 6px 10px var(--shadow-dark), 
    inset -6px -6px 10px var(--shadow-light);
  border-radius: var(--border-radius);
}

.neu-convex {
  background: linear-gradient(145deg, #ffffff, #d4d8db);
  box-shadow:  
    9px 9px 16px var(--shadow-dark), 
    -9px -9px 16px var(--shadow-light);
  border-radius: var(--border-radius);
}

.neu-concave {
  background: linear-gradient(145deg, #d4d8db, #ffffff);
  box-shadow:  
    9px 9px 16px var(--shadow-dark), 
    -9px -9px 16px var(--shadow-light);
  border-radius: var(--border-radius);
}