@import url('/fonts/nunito.css');

:root {
  --sepia-bg-light: #f4ecd8;
  --sepia-fg-light: #3d3229;
  --sepia-accent-light: #5c4a0d;
  --sepia-accent-hover-light: #8b6914;
  --sepia-header-light: #f4ecd8;
  --sepia-border-light: #d4c4a8;
  --sepia-card-light: #fff8e7;
  --sepia-link-light: #8b6914;
  --sepia-link-hover-light: #a67c00;
  --sepia-input-bg-light: #fff8e7;
  --sepia-input-border-light: #d4c4a8;
  --sepia-focus-light: #8b6914;
  
  --sepia-bg-dark: #1E1C18;
  --sepia-fg-dark: #e8dcc0;
  --sepia-accent-dark: #5c4a0d;
  --sepia-accent-hover-dark: #8b6914;
  --sepia-header-dark: #1E1C18;
  --sepia-border-dark: #4a3d2d;
  --sepia-card-dark: #3d3229;
  --sepia-link-dark: #c9a227;
  --sepia-link-hover-dark: #d4b338;
  --sepia-input-bg-dark: #1a1610;
  --sepia-input-border-dark: #4a3d2d;
  --sepia-focus-dark: #8b6914;
  
  --fun-font: 'Nunito', 'Quicksand', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: var(--sepia-bg-light);
    color: var(--sepia-fg-light);
    font-family: var(--fun-font);
  }
  
  a,
  .status__display-name a,
  .status__content a,
  .account__display-name a,
  .navigation-bar a,
  .column-header a {
    color: var(--sepia-link-light);
  }
  
  a:hover,
  .status__display-name a:hover,
  .status__content a:hover,
  .account__display-name a:hover {
    color: var(--sepia-link-hover-light);
  }
  
  .button,
  .compose-form__publish-button,
  .icon-button {
    background-color: var(--sepia-accent-light);
    color: #fff;
  }
  
  .button:hover,
  .compose-form__publish-button:hover,
  .icon-button:hover {
    background-color: var(--sepia-accent-hover-light);
  }
  
  .button.secondary,
  .button.button-secondary {
    background-color: var(--sepia-header-light);
    color: var(--sepia-fg-light);
  }
  
  .column-header,
  .column-back-button,
  .navigation-bar,
  .compose-form__warning,
  .compose-form__sensitive-warning,
  .account__header,
  .account__header__active {
    background-color: var(--sepia-header-light);
    border-bottom-color: var(--sepia-border-light);
    color: var(--sepia-fg-light);
  }
  
  .status-card,
  .status__content,
  .compose-form,
  .column,
  .column > .scrollable,
  .status,
  .status__wrapper {
    background-color: var(--sepia-bg-light);
  }
  
  .status__prepend,
  .status__action-bar {
    background-color: var(--sepia-bg-light);
    border-top-color: var(--sepia-border-light);
  }
  
  .search {
    background-color: var(--sepia-input-bg-light);
    border-color: var(--sepia-input-border-light);
  }
  
  .search__input,
  .search__input:focus {
    background-color: var(--sepia-input-bg-light);
    color: var(--sepia-fg-light);
    border-color: var(--sepia-input-border-light);
  }
  
  .search__input::placeholder {
    color: var(--sepia-fg-light);
    opacity: 0.6;
  }
  
  .compose-form,
  .compose-form__autosuggest-wrapper,
  .compose-form__textarea-wrapper,
  .compose-form__footer {
    background-color: var(--sepia-bg-light);
  }
  
  .compose-form__textarea,
  .compose-form__textarea:focus {
    background-color: var(--sepia-input-bg-light);
    color: var(--sepia-fg-light);
    border-color: var(--sepia-input-border-light);
  }
  
  .compose-form__textarea::placeholder {
    color: var(--sepia-fg-light);
    opacity: 0.6;
  }
  
  input,
  textarea,
  select {
    background-color: var(--sepia-input-bg-light);
    color: var(--sepia-fg-light);
    border-color: var(--sepia-input-border-light);
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--sepia-focus-light);
    outline-color: var(--sepia-focus-light);
  }
  
  .notification {
    background-color: var(--sepia-bg-light);
    border-bottom-color: var(--sepia-border-light);
  }
  
  .notification.unread {
    background-color: var(--sepia-card-light);
  }
  
  *:focus {
    outline-color: var(--sepia-focus-light);
  }
  
  .icon-button.active {
    color: var(--sepia-accent-light);
  }
  
  .compose-form__actions .icon-button {
    color: var(--sepia-fg-light) !important;
  }
  
  .admin-wrapper .content__heading__tabs a {
    color: var(--sepia-fg-light) !important;
  }
  
  .admin-wrapper .content__heading__tabs a.selected {
    color: #fff !important;
    background: var(--sepia-accent-light) !important;
  }
  
  .status__action-bar-button:hover,
  .icon-button:hover {
    color: var(--sepia-accent-light) !important;
  }
  
  /* Rainbow action bar buttons */
  .status__action-bar-button .icon-reply {
    color: #e74c3c !important;
    background: var(--sepia-bg-light) !important;
  }
  
  .status__action-bar-button .icon-retweet {
    color: #27ae60 !important;
    background: var(--sepia-bg-light) !important;
  }
  
  .status__action-bar-button .icon-star {
    color: #3498db !important;
    background: var(--sepia-bg-light) !important;
  }
  
  .status__action-bar-button .icon-bookmark {
    color: #9b59b6 !important;
    background: var(--sepia-bg-light) !important;
  }
  
  .admin-wrapper .sidebar ul a {
    color: var(--sepia-fg-light) !important;
  }
  
  .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
    color: var(--sepia-accent-light) !important;
  }
  
  .column-link.active {
    color: var(--sepia-accent-light) !important;
  }
  
  .dropdown-button {
    color: var(--sepia-fg-light) !important;
    border-color: var(--sepia-accent-light) !important;
    background-color: var(--sepia-input-bg-light) !important;
  }
  
  .about__section__title {
    color: var(--sepia-accent-light) !important;
  }
  
  .rules-list li::before {
    background: var(--sepia-accent-light) !important;
  }
  
  .rules-list__hint {
    color: var(--sepia-fg-light) !important;
  }
  
  .badge {
    background-color: var(--sepia-accent-light);
    color: #fff;
  }
  
  .dropdown-menu {
    background-color: var(--sepia-card-light);
    border-color: var(--sepia-border-light);
  }
  
  .dropdown-menu__item a,
  .dropdown-menu__item button {
    color: var(--sepia-fg-light);
  }
  
  .dropdown-menu__item a:hover,
  .dropdown-menu__item button:hover {
    background-color: var(--sepia-header-light);
  }
  
  .modal-root__modal {
    background-color: var(--sepia-bg-light);
  }
  
  .modal-root__modal .compose-form {
    background-color: var(--sepia-bg-light);
  }
  
  .status__content,
  .account__bio,
  .display-name {
    color: var(--sepia-fg-light);
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--sepia-bg-dark);
    color: var(--sepia-fg-dark);
    font-family: var(--fun-font);
  }
  
  a,
  .status__display-name a,
  .status__content a,
  .account__display-name a,
  .navigation-bar a,
  .column-header a {
    color: var(--sepia-link-dark);
  }
  
  a:hover,
  .status__display-name a:hover,
  .status__content a:hover,
  .account__display-name a:hover {
    color: var(--sepia-link-hover-dark);
  }
  
  .button,
  .compose-form__publish-button,
  .icon-button {
    background-color: var(--sepia-accent-dark);
    color: #fff;
  }
  
  .button:hover,
  .compose-form__publish-button:hover,
  .icon-button:hover {
    background-color: var(--sepia-accent-hover-dark);
  }
  
  .button.secondary,
  .button.button-secondary {
    background-color: var(--sepia-header-dark);
    color: var(--sepia-fg-dark);
  }
  
  .column-header,
  .column-back-button,
  .navigation-bar,
  .compose-form__warning,
  .compose-form__sensitive-warning,
  .account__header,
  .account__header__active {
    background-color: var(--sepia-header-dark);
    border-bottom-color: var(--sepia-border-dark);
    color: var(--sepia-fg-dark);
  }
  
  .status-card,
  .status__content,
  .compose-form,
  .column,
  .column > .scrollable,
  .status,
  .status__wrapper {
    background-color: var(--sepia-bg-dark);
  }
  
  .status__prepend,
  .status__action-bar {
    background-color: var(--sepia-bg-dark);
    border-top-color: var(--sepia-border-dark);
  }
  
  .search {
    background-color: var(--sepia-input-bg-dark);
    border-color: var(--sepia-input-border-dark);
  }
  
  .search__input,
  .search__input:focus {
    background-color: var(--sepia-input-bg-dark);
    color: var(--sepia-fg-dark);
    border-color: var(--sepia-input-border-dark);
  }
  
  .search__input::placeholder {
    color: var(--sepia-fg-dark);
    opacity: 0.6;
  }
  
  .compose-form,
  .compose-form__autosuggest-wrapper,
  .compose-form__textarea-wrapper,
  .compose-form__footer {
    background-color: var(--sepia-bg-dark);
  }
  
  .compose-form__textarea,
  .compose-form__textarea:focus {
    background-color: var(--sepia-input-bg-dark);
    color: var(--sepia-fg-dark);
    border-color: var(--sepia-input-border-dark);
  }
  
  .compose-form__textarea::placeholder {
    color: var(--sepia-fg-dark);
    opacity: 0.6;
  }
  
  input,
  textarea,
  select {
    background-color: var(--sepia-input-bg-dark);
    color: var(--sepia-fg-dark);
    border-color: var(--sepia-input-border-dark);
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--sepia-focus-dark);
    outline-color: var(--sepia-focus-dark);
  }
  
  .notification {
    background-color: var(--sepia-bg-dark);
    border-bottom-color: var(--sepia-border-dark);
  }
  
  .notification.unread {
    background-color: var(--sepia-card-dark);
  }
  
  *:focus {
    outline-color: var(--sepia-focus-dark);
  }
  
  .icon-button.active {
    color: var(--sepia-accent-dark);
  }
  
  .compose-form__actions .icon-button {
    color: var(--sepia-fg-dark) !important;
  }
  
  .admin-wrapper .content__heading__tabs a {
    color: var(--sepia-fg-dark) !important;
  }
  
  .admin-wrapper .content__heading__tabs a.selected {
    color: #fff !important;
    background: var(--sepia-accent-dark) !important;
  }
  
  .status__action-bar-button:hover,
  .icon-button:hover {
    color: var(--sepia-accent-dark) !important;
  }
  
  /* Rainbow action bar buttons */
  .status__action-bar-button .icon-reply {
    color: #e74c3c !important;
    background: var(--sepia-bg-dark) !important;
  }
  
  .status__action-bar-button .icon-retweet {
    color: #27ae60 !important;
    background: var(--sepia-bg-dark) !important;
  }
  
  .status__action-bar-button .icon-star {
    color: #3498db !important;
    background: var(--sepia-bg-dark) !important;
  }
  
  .status__action-bar-button .icon-bookmark {
    color: #9b59b6 !important;
    background: var(--sepia-bg-dark) !important;
  }
  
  .admin-wrapper .sidebar ul a {
    color: var(--sepia-fg-dark) !important;
  }
  
  .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
    color: var(--sepia-link-dark) !important;
  }
  
  .column-link.active {
    color: var(--sepia-link-dark) !important;
  }
  
  .dropdown-button {
    color: var(--sepia-fg-dark) !important;
    border-color: var(--sepia-accent-dark) !important;
    background-color: var(--sepia-input-bg-dark) !important;
  }
  
  .about__section__title {
    color: var(--sepia-link-dark) !important;
  }
  
  .rules-list li::before {
    background: var(--sepia-link-dark) !important;
  }
  
  .rules-list__hint {
    color: var(--sepia-fg-dark) !important;
  }
  
  .badge {
    background-color: var(--sepia-accent-dark);
    color: #fff;
  }
  
  .dropdown-menu {
    background-color: var(--sepia-card-dark);
    border-color: var(--sepia-border-dark);
  }
  
  .dropdown-menu__item a,
  .dropdown-menu__item button {
    color: var(--sepia-fg-dark);
  }
  
  .dropdown-menu__item a:hover,
  .dropdown-menu__item button:hover {
    background-color: var(--sepia-header-dark);
  }
  
  .modal-root__modal {
    background-color: var(--sepia-bg-dark);
  }
  
  .modal-root__modal .compose-form {
    background-color: var(--sepia-bg-dark);
  }
  
  .status__content,
  .account__bio,
  .display-name {
    color: var(--sepia-fg-dark);
  }
}

/* Remove purple from all instances in both modes */
* {
  border-color: var(--sepia-border-light) !important;
}

@media (prefers-color-scheme: dark) {
  * {
    border-color: var(--sepia-border-dark) !important;
  }
}

/* Link footer overrides */
.link-footer p {
  color: var(--sepia-fg-light) !important;
}

.link-footer p strong {
  font-weight: 500;
}

.link-footer a {
  color: var(--sepia-link-light) !important;
}

@media (prefers-color-scheme: dark) {
  .link-footer p {
    color: var(--sepia-fg-dark) !important;
  }
  
  .link-footer a {
    color: var(--sepia-link-dark) !important;
  }
}

/* Override Mastodon's default body color */
body {
  color: var(--sepia-fg-light) !important;
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--sepia-fg-dark) !important;
  }
}

/* Override background color variables */
:root {
  --background-border-color: var(--sepia-border-light);
  --background-color: var(--sepia-bg-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-border-color: var(--sepia-border-dark);
    --background-color: var(--sepia-bg-dark);
  }
}

/* Scrollbar colors */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--sepia-accent-light) var(--sepia-border-light);
  }
}

@media (prefers-color-scheme: dark) {
  @supports not selector(::-webkit-scrollbar) {
    html {
      scrollbar-color: var(--sepia-accent-dark) var(--sepia-border-dark);
    }
  }
}

/* Override indigo/purple variables */
:root {
  --indigo-1: var(--sepia-accent-light);
  --indigo-2: var(--sepia-accent-hover-light);
  --indigo-3: var(--sepia-accent-light);
  --indigo-5: var(--sepia-link-light);
  --indigo-6: var(--sepia-link-hover-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --indigo-1: var(--sepia-accent-dark);
    --indigo-2: var(--sepia-accent-hover-dark);
    --indigo-3: var(--sepia-accent-dark);
    --indigo-5: var(--sepia-link-dark);
    --indigo-6: var(--sepia-link-hover-dark);
  }
}