:root {
    --color-bg: #F8F9FA;         /* war vorher surface */
    --color-surface: #EFEDE5;    /* war vorher bg */
    --color-text: #3A3A3A;
  
    --color-primary: #C7C5B2;
    --color-primary-hover: #D9D7C6;
    --color-primary-disabled: #E3E2D8;
  
    --color-secondary: #F25843;
    --color-secondary-hover: #FF6A55;
    --color-secondary-disabled: #F5B0A4;
  
    --color-red: #dc3545;
    --color-red-hover: #f5c6cb;
    --color-red-disabled: #f8d7da;
  
    --color-secondary-red: #B94A55;
    --color-secondary-red-hover: #D46872;
    --color-secondary-red-disabled: #E8B7BA;
  
    --color-gray: #6F7373;
    --color-gray-hover: #565A5A;
    --color-gray-disabled: #B7BBBA;

    --color-medium-gray: #E0DDD3;
    --color-medium-gray-hover: #D1CEC5;
    --color-medium-gray-disabled: #E0DDD380;

    --color-highlight-gray: #F5F3ED;
    --color-highlight-gray-hover: #E6E3DC;
    --color-highlight-gray-disabled: #F5F3ED80;

    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-success-disabled: #a7f3d0;
  
    --font-family: "DM Sans", sans-serif;
    --object-radius-large: 30px;
    --object-radius-medium: 15px;
    --object-radius-small: 5px;
  }
  
  /* Dark theme overrides */
  .dark-theme {
    --color-bg: #181818;         /* war vorher surface */
    --color-surface: #1E1D1A;    /* war vorher bg */
    --color-text: #E5E7EB;
  
    --color-primary: #C7C5B2;
    --color-primary-hover: #E0DECC;
    --color-primary-disabled: #59584F;
  
    --color-secondary: #F25843;
    --color-secondary-hover: #FF715C;
    --color-secondary-disabled: #6E3E36;
  
    --color-red: #dc3545;
    --color-red-hover: #f5c6cb;
    --color-red-disabled: #f8d7da;
  
    --color-secondary-red: #D65D6A;
    --color-secondary-red-hover: #E17683;
    --color-secondary-red-disabled: #70363C;
  
    --color-gray: #181818;
    --color-gray-hover: #2E2E2E;
    --color-gray-disabled: #505050;

    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-success-disabled: #a7f3d0;
  }