:root {
        --warn: #bc9300; /* Jade green - representing innocence */
        --bg: #1a1d24; /* Dark slate background */
        --text-muted: #a6acb8; /* Dark slate background */
        --card-bg: #322f3b; /* Slightly lighter slate for cards */
        --modal-bg: #242830; /* Matching modal background */
        --text: #ffffff; /* Soft white text */
        --overlay: rgba(26, 29, 36, 0.9); /* Dark overlay matching background */
        --border-neutral: #4a4b55; /* Subtle border color */
        --button-color: white;
      }

      body.theme-default {
        --innocent: #58a284; /* Jade green - representing innocence */
        --criminal: #c66464; /* Deep crimson - representing criminal */

        --border-innocent: rgb(46, 102, 76);
        --background-innocent: rgb(38, 77, 59);
        --border-criminal: #8b2a53;
        --background-criminal: #5c2235;

        --background-innocent-consumed: rgb(26, 53, 46);
        --background-criminal-consumed: #411b2b;
      }

      body.theme-acc-1 {
        --innocent: #36a4df; /* Jade green - representing innocence */
        --criminal: #d3c76e; /* Deep crimson - representing criminal */

        --border-innocent: #0d6da0;
        --background-innocent: #074262;
        --border-criminal: #766a12;
        --background-criminal: #413910;

        --background-innocent-consumed: #063148;
        --background-criminal-consumed: #342d0c;
      }

      /* 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",
          "Comic Neue", 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-neutral); /* 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-neutral);
        margin: 4px;
      }

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

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

      input[type=text], input[type=email] {
        margin:5px;
        padding:5px;
        border-radius: 5px;
        border:0px;
        background-color: rgb(237, 237, 237);
      }