@require './palette.styl'

:root
  --bg: $bg
  --bg-secondary: $bgSecondary
  --bg-search: $bgSearch
  --bg-code: $bgCode
  --bg-highlighted: darken($bgCodeBlock, 30%)
  --bg-code-block: $bgCodeBlock
  --bg-tip-warning: $bgTipWarning
  --bg-tip-danger: $bgTipDanger
  --accent-color: $accentColor
  --color: $textColor
  --color-light: lighten($textColor, 26%)
  --text-color-link: $textColorLink
  --accent-color-darken: darken($accentColor, 20%)
  --text-accent-color-button: $textColorAccentButton
  --text-color-code: $textColorCode
  --border-color: $borderColor
  --outline-color: $outlineColor
  --content-max-width: $contentMaxWidth

html.dark-mode
  --bg: $darkBg
  --bg-secondary: $darkBgSecondary
  --bg-search: $darkBgSearch
  --bg-code: $darkBgCode
  --bg-highlighted: darken($bgCodeBlock, 20%)
  --bg-tip-warning: $darkBgTipWarning
  --bg-tip-danger: $darkBgTipDanger
  --accent-color: $darkAccentColor
  --color: $darkTextColor
  --color-light: lighten($darkTextColor, 26%)
  --text-color-link: $darkTextColorLink
  --accent-color-darken: darken($darkAccentColor, 20%)
  --text-accent-color-button: $darkTextColorAccentButton
  --text-color-code: $darkTextColorCode
  --border-color: $darkBorderColor
  --outline-color: $darkOutlineColor

html.sepia-mode
  --bg: $sepiaBg
  --bg-secondary: $sepiaBgSecondary
  --bg-search: $sepiaBgSearch
  --bg-code: $sepiaBgCode
  --bg-code-block: $sepiaBgCodeBlock
  --bg-tip-warning: $sepiaBgTipWarning
  --bg-tip-danger: $sepiaBgTipDanger
  --accent-color: $sepiaAccentColor
  --color: $sepiaTextColor
  --color-light: lighten($sepiaTextColor, 10%)
  --color-light-25: lighten($sepiaTextColor, 25%)
  --text-color-link: $sepiaTextColorLink
  --accent-color-darken: darken($sepiaAccentColor, 20%)
  --text-accent-color-button: $sepiaTextColorAccentButton
  --text-color-code: $sepiaTextColorCode
  --border-color: $sepiaBorderColor
  --outline-color: $sepiaOutlineColor

html, body, .navbar, .sidebar, .links, .sidebar-link, .nav-link 
  background-color: var(--bg)
  color: var(--color)

a, .edit-link > a 
  color: var(--text-color-link)

a > .icon.outbound
  color: inherit

hr, tr, td, th
  border-color: var(--border-color)

tr:nth-child(even)
  background-color: var(--bg-secondary)

h2
  border-color: var(--border-color)

.page code 
  background-color: var(--bg-code)
  color: var(--text-color-code)

// outline
[tabindex]:not([tabindex="-1"]), a, button, input, select, textarea
  outline: 2px solid transparent
  outline-offset: 6px
  transition: outline-offset .1s ease
  
:focus, .sidebar-button:focus
  outline-color: var(--outline-color)
  outline-offset: 3px