/* Default theme variables */
  :root {
      --bg-color: #282c34;
      --text-color: #fff;
      --textarea-bg: #282c34;
      --button-bg: #444;
      --button-text: #fff;
      --keyword: #66d9ef;
      --string: #e6db74;
      --number: #ae81ff;
      --comment: #75715e;
      --operator: #f92672;

  }

  /* Light theme variables */
  .light-mode {
      --bg-color: #fdfdfd;
      --text-color: #000000;
      --textarea-bg: #f7f8f6;
      --button-bg: #ddd;
      --button-text: #000;
      --keyword: #0074D9;
      --string: #D35400;
      --number: #8E44AD;
      --comment: #7F8C8D;
      --operator: #D63031;
  }

  /* Apply theme variables */

  body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: sans-serif;
      padding: 1em;
  }

  #inputSql {
      background-color: var(--textarea-bg);
      color: var(--text-color);
      border: 1px solid #888;
      padding: 0.5em;
      width: 100%;
      height: 150px;
  }

  button {
      background-color: var(--button-bg);
      color: var(--button-text);
      border: none;
      padding: 0.5em 1em;
      margin-top: 0.5em;
      cursor: pointer;
  }

  #outputSql {
      margin-top: 1em;
      padding: 1em;
      border: 1px solid #888;
      background-color: var(--textarea-bg);
      color: var(--text-color);
      white-space: pre-wrap;
  }

  .theme-toggle {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 1.5em;
      cursor: pointer;
      color: var(--text-color);
      transition: color 0.3s;
  }

  .theme-toggle:hover {
      opacity: 0.8;
  }

  /*syntax highlighting */

  .light-mode.keyword {
      color: var(--keyword);
      font-weight: bold;
  }

  .string {
      color: var(--string);
  }

  .number {
      color: var(--number);
  }

  .comment {
      color: var(--comment);
      font-style: italic;
  }

  .operator {
      color: var(--operator);
  }