color:
    background: "#03000C"
    title: "#fff"
    subtitle: "#fff"
    text: "rgba(255,255,255,.75)"
    accent: "#FF0099"
    orbe:
        =: "magenta"
        1: tomato
        2: "#ff00001c"
        3: "#2e00ff24"
    divide: rgba(255,255,255,.2)
    invert: "#fff"
    card:
        container: rgba(255,255,255,.05)
        border: rgba(255,255,255,.1)
        layer: "#1d1a25"
    link:
        =: cyan
        social:
            container: $color-background
            invert: $color-invert

button:
    text:
        size: $size-4
        spacing: 1px
    border:
        =: $button-border-width solid $color-divide
        active: $button-border-width solid $color-orbe
        width: 2px
        radius: 100vw
        color: $color-card-border
    gap: $size-4
    padding: $size-1 $size-4
    size: $size-7
    color:
        =: $color-title
    (small):
        size: $size-6
        text:
            size: $size-3
    (checked):
        border: $$button-border-active
    transition: .25s ease all

size:
    "1": 4px
    "2": 8px # 2
    "3": 12px # 3
    "4": 16px # 4
    "5": 20px # 5
    "6": 32px # 8
    "7": 44px # 11
    "8": 60px # 15
    "9": 80px # 20
    "10": 120px # 30

text:
    weight:
        =: 300
        medium: 500
        bold: 700
    size:
        =: $size-4
        title:
            1: "clamp($size-7 , 5vw , $size-8)"
            2: "clamp($size-6 , 4vw , $size-8)"
            3: "clamp($size-4 , 5vw , $size-6)"
            4: "clamp($size-3 , 5vw , $size-5)"
            5: "clamp($size-2 , 5vw , $size-4)"
    height:
        =: 1.8
        title: 1.2
    (small):
        size: $size-3
        height: 1.4
    (bold):
        weight: $text-weight-bold
    (cols):
        column:
            count: 2
            width: 320px
            gap: $$size-4
# New form of token declaration
card:
    gap: $size-4
    content:
        space: $size-5
    media:
        space: $size-1
    footer:
        space: $size-2
    dot:
        size: $size-2
        transition: 1s ease all
    border:
        =: $card-border-width solid $card-border-color
        width: 1px
        radius: "$size-2"
        color: "$color-card-border"
link:
    transition: .3s ease all
    social:
        space: 2px
        size: $size-6
        border:
            =: $link-social-border-width solid $link-social-border-color
            width: 1px
            radius: 100px
            color: $color-divide

layout:
    max:
        width: 980px
    padding: $$size-9 $$size-5

scroll:
    width: .5rem

avatar:
    size: $size-7
    (small):
        size: $size-6