:root {
  /* Main color */
  --color-primary: #4c58e4; /* main color */
  --color-primary-light: #838df7; /* accent deschis */
  --color-primary-dark: #2e369c; /* accent închis */

  /* Additional accents */
  --color-accent-1: #10b981; /* success / verde */
  --color-accent-2: #f59e0b; /* warning / galben */
  --color-accent-3: #ef4444; /* error / roșu */

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-light: #e5e7eb; /* pentru fundaluri alternative */
  --color-gray: #6b7280; /* text secundar */
  --color-gray-dark: #1f2937; /* text principal */

  /* Semantic colors */
  --color-success: var(--color-accent-1);
  --color-warning: var(--color-accent-2);
  --color-error: var(--color-accent-3);

  /* Backgrounds */
  --color-bg: #fafafa;
  --color-bg-alt: #ffffff;

  /* Text */
  --color-text: var(--color-gray-dark);
  --color-text-light: var(--color-gray);

  /* Borders */
  --color-border: var(--color-gray-light);

  /* Links */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);

  /* Selection */
  --color-selection: var(--color-primary-light);

  /* RGB for backgrounds if needed */
  --color-bg-rgb: 255, 255, 255;
  
  --box-shadow-main: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Dark mode */
.theme-mode-dark{
    --color-bg: #111827;
    --color-bg-alt: #1f2937;
    --color-text: #d1d5db;
    --color-text-light: #9ca3af;
    --color-border: #374151;

    --color-link: #838df7;
    --color-link-hover: #a2aaf9;

    --color-bg-rgb: 15, 20, 30;
    
    --box-shadow-main:0 2px 20px rgb(255 255 255 / 8%);
}
/*@media (prefers-color-scheme: dark) {*/
/*  :root {*/
/*    --color-bg: #111827;*/
/*    --color-bg-alt: #1f2937;*/
/*    --color-text: #d1d5db;*/
/*    --color-text-light: #9ca3af;*/
/*    --color-border: #374151;*/

/*    --color-link: #838df7;*/
/*    --color-link-hover: #a2aaf9;*/

/*    --color-bg-rgb: 15, 20, 30;*/
    
/*    --box-shadow-main:0 2px 20px rgb(255 255 255 / 8%);*/

/*  }*/
/*}*/