@font-face {
  font-family: 'Muller';
  src: url('../../assests/fonts/MullerRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
    --bg-color: #ffffff;
    --bg-secondary-color: #f8f9fa;
    --text-color: #212529;
    --accent-color: #3c9f47;
    --card-color: #e9ecef;
    --unread-message-color: #e9ecef;
    --read-message-color: #f8f9fa;
    --delivered-message-color: #0d6efd;
    --secondary-text: #6c757d;
  }
  
  body {
    font-family: 'Muller', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  .input-field-style {
    color: var(--text-color);
    background-color: var(--card-color);
  }
  .input-field-style::placeholder {
    color: var(--text-color);
  }
  .input-field-style:focus {
    background-color: var(--card-color);
    color: var(--text-color);
    outline: none;
    box-shadow: none;
  }
  .layers-style {
    background-color: var(--bg-color);
  }
  .interactive-style {
    background-color: var(--bg-secondary-color);
  }

  /* Messages */
  .sent {
    background-color: var(--read-message-color);
  }
  .sent.delivered {
    border-color: var(--delivered-message-color) !important;
  }
  .sent.read {
    border-color: var(--accent-color) !important;
  }

  .recieved.read {
    background-color: var(--read-message-color);
  }
  .recieved.unread {
    background-color: var(--unread-message-color);
  }

  /* Text */
  .primary-text-style {
    color: var(--text-color)
  }
  .secondary-text-style {
    color: var(--secondary-text)
  }
  .accent-text-style {
    color: var(--accent-color)
  }

  /* Modal window */
  .modal-body {
    background-color: var(--bg-color);
  }
  .modal-header {
    background-color: var(--bg-secondary-color);
  }
  .modal-title {
    color: var(--text-color);
  }

  .conversation-card {
    background-color: var(--card-color);
  }
  .unread-badge {
    background-color: var(--accent-color);
  }

  /*Buttons*/
  .btn-primary {
    background-color: var(--card-color);
    border-color: var(--accent-color);
    color: var(--text-color);
  }
  .btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--card-color);
  }