
@use 'sass:math'

\:root
    --font-primary: 'Calibre', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
    --font-code: 'IBM Plex Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

    // Font Sizes
    --font-size-xxs: 1rem
    --font-size-xs: 1.15rem
    --font-size-sm: 1.5rem
    --font-size-md: 1.7rem
    --font-size-lg: 3rem
    --font-size-code: 1.3rem
    --font-size-code-sm: 1.1rem

    // Colors
    --color-back: #fff
    --color-front: #1a1e24
    --color-subtle: #dfdfdf
    --color-paper: #fff

    --color-red-text: hsl(346, 84%, 45%)
    --color-red-transparent: hsla(346, 84%, 61%, 0.11)
    --color-green-text: hsl(108, 66%, 38%)
    --color-green-transparent: hsla(108, 66%, 63%, 0.11)

    // Theme
    --color-theme-dark: #291e56
    --color-theme-dark-secondary: #{desaturate(lighten(#291e56, 25), 20)}
    --color-theme-dark-tertiary: #{saturate(lighten(#291e56, 55), 20)}
    --color-theme-dark-tertiary-alt: #{desaturate(lighten(#291e56, 40), 10)}
    --color-theme-dark-subtle: #6a5f8e
    --color-theme-contrast: #fff
    --color-theme-primary: #ffab7e
    --color-theme-primary-light: #f9e5d0
    --color-theme-secondary: pink
    --color-theme-secondary-light: #ffebef
    --color-code: rgba(240, 239, 249, 0.9)
    --color-theme-gradient-light: linear-gradient(to right, var(--color-theme-primary-light), var(--color-theme-secondary))
    --color-theme-gradient-dark: linear-gradient(to right, #c33a8a, #ff5da2)
    --color-theme-shadow: #{rgba(#291e56, 0.15)}

    --color-default-light: rgba(240, 239, 249, 0.9)
    --color-default-medium: #483597
    --color-default-code: #eae5f9

    --color-warning-light: hsl(46, 100%, 95%)
    --color-warning-medium: hsl(45, 90%, 55%)
    --color-warning-code: hsl(46, 100%, 97%)

    --color-danger-light: hsl(355, 100%, 96%)
    --color-danger-medium: hsl(346, 84%, 61%)
    --color-danger-code: hsl(355, 100%, 98%)

    // Syntax Highlighting
    --syntax-text: #4b4171
    --syntax-text-shadow: rgba(255, 255, 255, 0.5)
    --syntax-comment: #949e9b
    --syntax-tag: #5b4d8e
    --syntax-number: #8b1eee
    --syntax-string: #8889ec
    --syntax-operator: #e31f72
    --syntax-function: #8b1eee
    --syntax-keyword: #e31f72
    --syntax-decorator: #06bd9b

/* Reset */

*, *:before, *:after
    box-sizing: border-box
    padding: 0
    margin: 0
    border: 0
    outline: 0

html
    font-family: sans-serif
    text-rendering: optimizeSpeed
    -ms-text-size-adjust: 100%
    -webkit-text-size-adjust: 100%
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale


body
    margin: 0

article, aside, details, figcaption, figure, footer, header, main, menu, nav,
section, summary, progress
    display: block

a
    background-color: transparent
    color: inherit
    text-decoration: none

    &:active,
    &:hover
        outline: 0

abbr[title]
    text-decoration: none

b, strong
    font-weight: inherit
    font-weight: bolder

small
    font-size: 80%

sub, sup
    position: relative
    font-size: 65%
    line-height: 0
    vertical-align: baseline

sup
    top: -0.5em

sub
    bottom: -0.15em

img
    border: 0
    height: auto
    max-width: 100%

svg
    max-width: 100%
    color-interpolation-filters: sRGB

    &:not(:root)
        overflow: hidden

hr
    box-sizing: content-box
    overflow: visible
    height: 0

pre
    overflow: auto

code, pre
    font-family: monospace, monospace
    font-size: 1em

table
    text-align: left
    width: 100%
    max-width: 100%
    border-collapse: collapse

    td, th
        vertical-align: top

    th:empty
        display: contents

button
    appearance: none
    background: transparent
    cursor: pointer

progress
    appearance: none

/* Layout */

html
    font-size: 11px

@media(max-width: 767px)
    html
        font-size: 10px

body
    font-family: var(--font-primary)
    font-size: var(--font-size-md)
    background: var(--color-back)
    color: var(--color-front)

h1, h2, h3, h4, h5, h6, strong, b
    font-weight: 600

::selection
    background: var(--color-theme-primary-light)
    color: var(--color-theme-dark)

p
    font-size: var(--font-size-md)
    line-height: 1.25
    margin-bottom: 3rem

kbd, code, td span, dfn
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: auto

article ul, article ol
    margin-bottom: 4rem
    margin-left: 2rem

    li
        margin-bottom: 1rem

ol li::marker
    font-weight: bold

article
    padding-bottom: 4rem

article > div > img
    margin-bottom: 4rem

p + .gatsby-resp-image-link
    margin-bottom: 4rem

#gatsby-noscript
    display: none
