:root{
  /* Text Color*/
  --tx-color-light-0:#000;
  --tx-color-light-1:#212529;
  --tx-color-light-2:#343a40;
  --tx-color-light-3:#495057;
  --tx-color-light-4:#6c757d;
  --tx-color-light-5:#adb5bd;

  --tx-color-dark-0:#fff;
  --tx-color-dark-1:#f8f9fa;
  --tx-color-dark-2:#e9ecef;
  --tx-color-dark-3:#dee2e6;
  --tx-color-dark-4:#ced4da;
  --tx-color-dark-5:#adb5bd;
  /*BG Color*/
  --bg-color-light-0:#fff;
  --bg-color-light-1:#f8f9fa;
  --bg-color-light-2:#dee2e6;
  --bg-color-light-3:#adb5bd;
  --bg-more-light-1:rgba(255, 255, 255, .25);
  --bg-more-light-2:rgba(255, 255, 255, .5);
  --bg-more-light-3:rgba(255, 255, 255, .75);
  --bg-less-light-1:rgba(0, 0, 0, .25);
  --bg-less-light-2:rgba(0, 0, 0, .5);
  --bg-less-light-3:rgba(0, 0, 0, .75);

  --bg-color-dark-0:#000;
  --bg-color-dark-1:#1f1f1f;
  --bg-color-dark-2:#2d2d2d;
  --bg-color-dark-3:#353535;
  --bg-more-dark-1:rgba(0, 0, 0, .25);
  --bg-more-dark-2:rgba(0, 0, 0, .5);
  --bg-more-dark-3:rgba(0, 0, 0, .75);
  --bg-less-dark-1:rgba(255, 255, 255, .25);
  --bg-less-dark-2:rgba(255, 255, 255, .5); 
  --bg-less-dark-3:rgba(255, 255, 255, .75);
  /* Border*/
  --border-light-1:1px solid #212529;
  --border-light-2:1px solid #343a40;
  --border-light-3:1px solid #495057;

  --border-dark-1:1px solid #e9ecef;
  --border-dark-2:1px solid #ced4da;
  --border-dark-3:1px solid #6c757d;
  /* font family */
  --txfa0: 'Roboto';
  --txfa1: 'Arial';
  --txfa2: 'Courier New';
  /* text size */
  --tx-size-0:.2rem;
  --tx-size-1:.5rem;
  --tx-size-2:.75rem;
  --tx-size-3:1rem;
  --tx-size-4:1.5rem;
  --tx-size-5:2rem;
  --tx-size-6:3rem;
  --tx-size-7:5rem;
  /* spacing */
  --bx-space-0:0rem;
  --bx-space-1:.5rem;
  --bx-space-2:1rem;
  --bx-space-3:1.5rem;
  /* radius */
  --border-radius-0:0rem;
  --border-radius-1:0.25rem;
  --border-radius-2:0.5rem;
  --border-radius-3:1rem;
  --border-radius-4:50%;
  /* components */
  --backdrop-bg: #000;
  --toast-color:var(--txcl0);
  --toast-bg:var(--bxbg2);

  --msg-color:var(--txcl0);
  --msg-bg:var(--bxbg0);

  --menu-color:var(--txcl0);
  --menu-bg:var(--bxbg0);
  --card-radius:0.5rem;

  /* =============== Stop here ===============*/

  /* text color */
  --tx-color-0:var(--tx-color-light-0);
  --tx-color-1:var(--tx-color-light-1);
  --tx-color-2:var(--tx-color-light-2);
  --tx-color-3:var(--tx-color-light-3);
  --tx-color-4:var(--tx-color-light-4);
  --tx-color-5:var(--tx-color-light-5);
  /*background*/
  --bg-color-0:var(--bg-color-light-0);
  --bg-color-1:var(--bg-color-light-1);
  --bg-color-2:var(--bg-color-light-2);
  --bg-color-3:var(--bg-color-light-3);
  --bg-more-1:var(--bg-more-light-1);
  --bg-more-2:var(--bg-more-light-2);
  --bg-more-3:var(--bg-more-light-3);
  --bg-less-1:var(--bg-less-light-1);
  --bg-less-2:var(--bg-less-light-2);
  --bg-less-3:var(--bg-less-light-3);
  /* border */
  --border-1:var(--border-light-1);
  --border-2:var(--border-light-2);
  --border-3:var(--border-light-3);
}
body.dark-theme{
    /* text color */
    --tx-color-0:var(--tx-color-dark-0);
    --tx-color-1:var(--tx-color-dark-1);
    --tx-color-2:var(--tx-color-dark-2);
    --tx-color-3:var(--tx-color-dark-3);
    --tx-color-4:var(--tx-color-dark-4);
    --tx-color-5:var(--tx-color-dark-5);
    /*background*/
    --bg-color-0:var(--bg-color-dark-0);
    --bg-color-1:var(--bg-color-dark-1);
    --bg-color-2:var(--bg-color-dark-2);
    --bg-color-3:var(--bg-color-dark-3);
    --bg-more-1:var(--bg-more-dark-1);
    --bg-more-2:var(--bg-more-dark-2);
    --bg-more-3:var(--bg-more-dark-3);
    --bg-less-1:var(--bg-less-dark-1);
    --bg-less-2:var(--bg-less-dark-2);
    --bg-less-3:var(--bg-less-dark-3);
    /* border */
    --border-1:var(--border-dark-1);
    --border-2:var(--border-dark-2);
    --border-3:var(--border-dark-3);
  }
  @media (prefers-color-scheme: dark){
    :root{
      /* text color */
      --tx-color-0:var(--tx-color-dark-0);
      --tx-color-1:var(--tx-color-dark-1);
      --tx-color-2:var(--tx-color-dark-2);
      --tx-color-3:var(--tx-color-dark-3);
      --tx-color-4:var(--tx-color-dark-4);
      --tx-color-5:var(--tx-color-dark-5);
      /*background*/
      --bg-color-0:var(--bg-color-dark-0);
      --bg-color-1:var(--bg-color-dark-1);
      --bg-color-2:var(--bg-color-dark-2);
      --bg-color-3:var(--bg-color-dark-3);
      --bg-more-1:var(--bg-more-dark-1);
      --bg-more-2:var(--bg-more-dark-2);
      --bg-more-3:var(--bg-more-dark-3);
      --bg-less-1:var(--bg-less-dark-1);
      --bg-less-2:var(--bg-less-dark-2);
      --bg-less-3:var(--bg-less-dark-3);
      /* border */
      --border-1:var(--border-dark-1);
      --border-2:var(--border-dark-2);
      --border-3:var(--border-dark-3);
    }
    body.light-theme{
      /* text color */
      --tx-color-0:var(--tx-color-light-0);
      --tx-color-1:var(--tx-color-light-1);
      --tx-color-2:var(--tx-color-light-2);
      --tx-color-3:var(--tx-color-light-3);
      --tx-color-4:var(--tx-color-light-4);
      --tx-color-5:var(--tx-color-light-5);
      /*background*/
      --bg-color-0:var(--bg-color-light-0);
      --bg-color-1:var(--bg-color-light-1);
      --bg-color-2:var(--bg-color-light-2);
      --bg-color-3:var(--bg-color-light-3);
      --bg-more-1:var(--bg-more-light-1);
      --bg-more-2:var(--bg-more-light-2);
      --bg-more-3:var(--bg-more-light-3);
      --bg-less-1:var(--bg-less-light-1);
      --bg-less-2:var(--bg-less-light-2);
      --bg-less-3:var(--bg-less-light-3);
      /* border */
      --border-1:var(--border-light-1);
      --border-2:var(--border-light-2);
      --border-3:var(--border-light-3);
    }
  }