:root {
        --overlay: rgba(26, 29, 36, 0.9); /* Dark overlay matching background */
        --button-color: white;
      }
      
      body.dark {
          --bg: #1a1d24;
          --warn: #bc9300;
          --card-bg: #322f3b;
          --background-highlight:#0000002c;
          --modal-bg: #242830;
          --modal-bg-secondary: #2c3039;
          --text: #ffffff;
          --text-title: #ffffff;
          --text-muted: #a6acb8;
          --border-button: #4a4b55;
          --border-neutral: #4a4b55;
          --shadow-color: rgb(0, 0, 0);
          --shadow-color-secondary: rgb(0,0,0);
          --face-shadow-color: #aeaeae4c;
          --share-color:var(--innocent);
          --speech-bg:#262626;
          --speech-border: rgb(172, 172, 172);
          --speech-color: rgb(221, 221, 221);
          --input-border-color:white;
          --input-bg-color:black;
          --input-text-color:white;
      }

      body.theme-default.dark {
        --innocent: #58a284;
        --criminal: #c66464;

        --background-innocent: rgb(38, 77, 59);
        --background-highlight-innocent:rgb(29, 64, 48);
        --border-innocent: rgb(46, 102, 76);

        --background-criminal: #5c2235;
        --background-highlight-criminal:#501d2e;
        --border-criminal: #8b2a53;

        --background-innocent-consumed: #1a352e;
        --background-highlight-innocent-consumed: #142d26;
        --background-criminal-consumed: #411b2b;
        --background-highlight-criminal-consumed: #371624;
        --text-innocent: white;
        --text-criminal: white;

        --button-innocent:#58a284;
        --button-criminal:#c66464;
        --button-innocent-hover:#58a2843b;
        --button-criminal-hover:#c664644f;

      }

      body.theme-acc-1.dark {
        --innocent: #36a4df;
        --criminal: #d3c76e;

        --background-innocent: #074262;
        --background-highlight-innocent: #0f374d;
        --border-innocent: #0d6da0;
        
        --background-criminal: #413910;
        --background-highlight-criminal: #362f0d;
        --border-criminal: #766a12;

        --background-innocent-consumed: #063148;
        --background-highlight-innocent-consumed: #062b3e;
        --background-criminal-consumed: #342d0c;
        --background-highlight-criminal-consumed: #2a240a;

        --button-innocent:#36a4df;
        --button-criminal:#d3c76e;
        --button-innocent-hover:#36a4df;
        --button-criminal-hover:#d3c76e;

      }

      body.light {
        --bg: #fff9ee;
        --warn: rgb(172, 116, 36);
        --card-bg: #e3d2b7;
        --background-highlight: #ebe3cd;
        --modal-bg: #e3d2b7;
        --modal-bg-secondary: #bfb099;
        --text: #4f5264;
        --text-title: #393c4d;
        --text-muted: #59556e;
        --border-button: #9e9ca7;
        --border-neutral: #f6f6f0;
        --shadow-color: rgb(164, 156, 155);
        --shadow-color-secondary: rgb(147, 121, 110);
        --face-shadow-color: #6c6c6c;
        --input-bg-color:#ffffff;
        --input-border-color:#ada292;
        --input-text-color:#383a4a;
        --share-color:#53a2c2;

        --speech-bg:#fbead1;
        --speech-border: rgb(150, 108, 93);
        --speech-color: rgb(150, 108, 93);
      }

      body.theme-default.light {
        --background-innocent: #c1e2a3;
        --background-criminal: #f6c0a9;
        --border-innocent: #97cda6;
        --border-criminal: #efa49f;
        --background-highlight-innocent:#dcebb7;
        --background-highlight-criminal:#ffd2bf;
        --background-innocent-consumed: #d8e4b0;
        --background-criminal-consumed: #f6d2bc;
        --background-highlight-innocent-consumed:#e5edcc;
        --background-highlight-criminal-consumed:#fcdecb;
        --text-innocent: #3a4b57;
        --text-criminal: #503247;
        --innocent: #a3e2b1;
        --criminal: #ee95a4;
        --button-innocent: #72bb5a;
        --button-innocent-hover: #45ad835e;
        --button-criminal: #ca6868;
        --button-criminal-hover: #c3568353;
      }

      body.theme-acc-1.light {
        --bg: #f8faff;
        --background-innocent: #97dbe6;
        --background-criminal: #eebddc;
        --border-innocent: #91d3de;
        --border-criminal: #d0b3e7;
        --background-highlight-innocent:#aae8f2;
        --background-highlight-criminal:#f7cde8;
        --background-innocent-consumed: #c9e6f2;
        --background-criminal-consumed: #f5d1eb;
        --background-highlight-innocent-consumed: #d5f0fb;
        --background-highlight-criminal-consumed:#fbdcf3;
        --text-innocent: #403a57;
        --text-criminal: #444469;
        --innocent: #97dbe6;
        --criminal: #eebddc;
        --button-innocent: #44b1c1;
        --button-innocent-hover: #83bec7ac;
        --button-criminal: #c861a2;
        --button-criminal-hover: #b584a391;
      }

      /* Global body styling updated */
      html {
        background-color: var(--bg);
        text-size-adjust: 100%;
      }

      body {
        background-color: var(--bg);
        color: var(--text);
        font-family: "Chalkboard SE", "Comic Sans MS", "Comic Sans", sans-serif;
      }

      #root {
        width: 100%;
      }

      :root {
        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
        line-height: 1.5;
        font-weight: 400;

        color-scheme: light dark;
        color: rgba(255, 255, 255, 0.87);
        background-color: #242424;

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      a {
        font-weight: 500;
        color: #646cff;
        text-decoration: inherit;
      }
      a:hover {
        color: #535bf2;
      }

      body {
        margin: 0;
        display: flex;
        flex-direction: column;
        place-items: center;
        min-width: 320px;
        min-height: 100vh;
      }

      h1 {
        line-height: 1.1;
      }

      button {
        border-radius: 8px;
        border: 1px solid transparent;
        padding: 0.6em 1.2em;
        font-size: 1em;
        font-weight: 500;
        font-family: inherit;
        background-color: #1a1a1a;
        cursor: pointer;
        transition: border-color 0.25s;
      }

      ul {
        text-align: left;
        padding-left: 30px;
      }

      li {
        margin: 10px;
      }

      button:focus,
      button:focus-visible {
        outline: 4px auto -webkit-focus-ring-color;
      }

      @media (prefers-color-scheme: light) {
        :root {
          color: #213547;
          background-color: #ffffff;
        }
        a:hover {
          color: #747bff;
        }
        button {
          background-color: #f9f9f9;
        }
      }

      button {
        padding: 10px 16px;
        border: 2px solid var(--border-button); /* Changed from highlight */
        border-radius: 4px;
        cursor: pointer;
        color: var(--text);
        font-size: 14px;
        transition: all 0.2s ease;
        outline: none;
        background-color: transparent;
        border-color: var(--border-button);
        margin: 4px;
      }

      button:focus {
        background-color: var(--border-button);
        border-color: var(--border-button);
        outline: none;
      }

      button:hover {
        background-color: var(--border-button);
        border-color: var(--border-button);
        outline: none;
      }

      input[type=text], input[type=email] {
        margin:5px;
        padding:5px;
        border-radius: 5px;
        border: 1px solid var(--input-border-color);
        background-color: var(--input-bg-color);
        color: var(--input-text-color);
      }