:root {
      --radius: 12px;
      --btn-font-size: 1rem;
    }

    [data-theme="light"] {
      --primary-bg: #F9F6FE;
      --secondary-card-bg: #EFE9F9;
      --card-bg: #FFFFFF;
      --text-color: #2E2B29;
      --text-muted: #736D68;
      --accent: #7C4DFF;
      --accent-light: #B084FF;
      --btn-bg: linear-gradient(45deg, #7C4DFF, #B084FF);
      --btn-hover: linear-gradient(45deg, #B084FF, #7C4DFF);
      --btn-text: #FFFFFF;
      --progress-bg: #E6D9F9;
      --progress-fill: #7C4DFF;
      --alert-green-bg: #E3F9E5;
      --alert-green-text: #207227;
      --alert-yellow-bg: #FFF8DB;
      --alert-yellow-text: #A26D00;
      --alert-orange-bg: #FFE9D6;
      --alert-orange-text: #C76B00;
      --alert-red-bg: #FBEAEA;
      --alert-red-text: #B00020;
      --alert-blue-bg: #E4F0FF;
      --alert-blue-text: #0B5394;
      --alert-gray-bg: #F0F0F0;
      --alert-gray-text: #444444;
    }

    [data-theme="dark"] {
      --primary-bg: #1C1825;
      --secondary-card-bg: #221B33;
      --card-bg: #2A1F45;
      --text-color: #F2EFEA;
      --text-muted: #A59D94;
      --accent: #B084FF;
      --accent-light: #D2B3FF;
      --btn-bg: linear-gradient(45deg, #8F4EFF, #A56DFF);
      --btn-hover: linear-gradient(45deg, #A56DFF, #8F4EFF);
      --btn-text: #F3E9FF;
      --progress-bg: #3B3051;
      --progress-fill: #B084FF;
      --alert-green-text: #A5F3D1;
      --alert-yellow-text: #FFEFAA;
      --alert-orange-text: #FFD1A6;
      --alert-red-text: #FFB3B3;
      --alert-blue-text: #B3D8FF;
      --alert-gray-text: #CCCCCC;
      --alert-green-bg:  #383d58;
      --alert-yellow-bg: #493e54;
      --alert-orange-bg: #493349;
      --alert-red-bg:    #493151;
      --alert-blue-bg:   #3d3a60;
      --alert-gray-bg:   #392f52;
    }