:root
{
    /* document colors */
    --color-bg: #0b0f14;
    --color-text: #e8e8e8;
    --color-link: #e8e8e8;
    --color-link-emph: white;

    --color-tint: rgba(137, 141, 143, 0.4);
    --color-tint-light: rgba(207, 214, 214, 0.35);
    --color-tint-dark: rgba(27, 27, 28, 0.45);
    /* design colors */
    --color-primary: rgb(73, 105, 247);
    --grad-primary: linear-gradient(135deg, #6a11cb, #1756c4);

    --color-accent: rgb(236, 148, 48);
    --grad-accent: linear-gradient(135deg, #ff6648, #f1de4e);

    --color-light: rgb(238, 238, 255);
    --grad-light: linear-gradient(135deg, #f1f1f1, #bababa);

    --color-dark: rgb(17, 17, 34);
    --grad-dark: linear-gradient(135deg, #233c48, #0f1423);

    --shadow-light-s: 0 0 var(--space-content) rgba(215, 240, 255, 0.3);
    --shadow-light-m: 0 0 calc(2 * var(--space-content)) rgba(211, 242, 255, 0.5);
    --shadow-light-l: 0 0 calc(3 * var(--space-content)) rgba(219, 244, 255, 0.7);

    --shadow-dark-s: 0 0 var(--space-content) rgba(0, 0, 0, 0.3);
    --shadow-dark-m: 0 0 calc(2 * var(--space-content)) rgba(0, 0, 0, 0.5);
    --shadow-dark-l: 0 0 calc(3 * var(--space-content)) rgba(0, 0, 0, 0.7);

    /* spacing */
    --spacing: 1.0;

    --space-content: calc(var(--spacing) * 0.8rem);

    --space-sector-inl: calc(var(--spacing) * 1.6rem);
    --space-sector-blk: calc(var(--spacing) * 3.2rem);

    --space-badge-inl: calc(var(--spacing) * 0.4em);
    --space-badge-blk: calc(var(--spacing) * 0.7em);

    --space-interaction-inl: calc(var(--spacing) * 0.8em);
    --space-interaction-blk: calc(var(--spacing) * 1.2em);
    
    /* timings */
    --trans-fast: 0.15s;
    --trans-med: 0.35s;
    --trans-slow: 0.55s;
}


html
{
    background-color: var(--color-bg);
    color: var(--color-text);
    scroll-behavior: smooth;
}

a
{
    color: var(--color-link);
    &:hover
    {
        color: var(--color-link-emph);
    }
}


/* ======================== ELEMENTS ======================== */

.badge, .chip, .btn
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--space-badge-inl) var(--space-badge-blk);
    text-decoration: none;

    * { text-decoration: none; }
}

.chip
{
    border-radius: 50cqh;
    overflow: hidden;
}

.btn
{
    padding: var(--space-interaction-inl) var(--space-interaction-blk);
    text-decoration: none;
}

.btn:disabled
{
    opacity: 0.5;
    filter: saturate(0.5);
    cursor: not-allowed;
}

.logo
{
    background-color: var(--color-tint-light);
    padding: 5px;

    img
    {
        height: 100%;
    }
    
    .logo-graphic
    {
        height: calc(var(--space-badge-blk) * 2 + 1rem - 10px);
        padding: 0;
        margin: 0;
    }

    &.btn .logo-graphic
    {
        height: calc(var(--space-interaction-blk) * 2 + 1rem - 10px);
    }

    .img-icon { display: block; }
    .img-full { display: none; }
    
    .square
    {
        object-fit: cover;
        object-position: center left;
    }
}

.break-line
{
    position:absolute;
    left: var(--space-content);
    right: var(--space-content);
    transform: translateY(-50%);
    height: 2px;
    background: var(--color-tint);
}

.break-page
{
    display: block;
    height: 1.5rem;
    background-image:
        repeating-linear-gradient(45deg, black 0 1rem, transparent 1rem 2rem),
        var(--grad-primary);
    box-shadow: var(--shadow-dark-l);
    z-index: 3;position:relative;
}

.text-area
{
    padding: var(--space-content);
    border: 1px solid var(--color-tint);
    background: var(--color-tint-dark);
    border-radius: var(--space-content);
}


/* ============ PROGRESS BAR ============ */

.progress-bar
{
    position: relative;
    background: var(--color-tint);
    border-radius: 50cqh;
    flex:1;
    border: 1px solid var(--color-tint-light);
}

.progress-bar-fill
{    
    padding: var(--space-badge-inl) var(--space-badge-blk);
    display: block;
    height: 100%;
    width: 100%; /* will make it grow over time with js as we scroll to it */
    transition: width var(--trans-slow) ease-in-out;
    border-radius: 50cqh; /* must do this here as well as parent, because box shadow doesnt follow parent radius */
}


/* ============ CARDS ============ */

.card
{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index:4;
    border-radius: calc(2 * var(--space-content));
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--color-tint);
    padding: 0;
    align-items: stretch;
}

.card-banner
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    height: 8rem;

    &::before
    {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.553), rgba(0, 0, 0, 0.142))
    }
}

.card-body
{
    flex: 1;
}

.card .text-area
{
    opacity: 0.7;
    flex:1;
    align-self: stretch;
    justify-self: stretch;
}

.tag
{
    background-color: var(--color-tint-dark);
}
/* ======================== UTILITY LAYOUT ======================== */

.relative
{
    position: relative;
}

.absolute
{
    position: absolute;
    inset: 0;
}

.content
{
    max-width: 100%;
    margin: 0 auto;
}

.content-gap { gap: var(--space-content); }

.content-padding { padding: var(--space-content); }
.content-padding-blk { padding-block: var(--space-content); }
.content-padding-inl { padding-inline: var(--space-content); }
.content-padding-blk-start { padding-block-start: var(--space-content); }
.content-padding-blk-end  { padding-block-end: var(--space-content); }
.content-margin { margin: var(--space-content); }
.content-margin-blk { margin-block: var(--space-content); }
.content-margin-inl { margin-inline: var(--space-content); }
.content-margin-blk-start { margin-block-start: var(--space-content); }
.content-margin-blk-end { margin-block-end: var(--space-content); }

.sector-padding { padding: var(--space-sector-blk) var(--space-sector-inl); }
.sector-padding-blk { padding-block: var(--space-sector-blk); }
.sector-padding-inl { padding-inline: var(--space-sector-inl); }
.sector-padding-blk-start { padding-block-start: var(--space-sector-blk); }
.sector-padding-blk-end { padding-block-end: var(--space-sector-blk); }
.sector-margin { margin: var(--space-sector-blk) var(--space-sector-inl); }
.sector-margin-blk { margin-block: var(--space-sector-blk); }
.sector-margin-inl { margin-inline: var(--space-sector-inl); }
.sector-margin-blk-start { margin-block-start: var(--space-sector-blk); }
.sector-margin-blk-end { margin-block-end: var(--space-sector-blk); }

.interact-padding { padding: var(--space-interaction-blk) var(--space-interaction-inl); }
.interact-padding-blk { padding-block: var(--space-interaction-blk); }
.interact-padding-inl { padding-inline: var(--space-interaction-inl); }
.interact-margin { margin: var(--space-interaction-blk) var(--space-interaction-inl); }
.interact-margin-blk { margin-block: var(--space-interaction-blk); }
.interact-margin-inl { margin-inline: var(--space-interaction-inl); }

.nopad { padding: 0; }
.nopad-top { padding-top: 0; }
.nopad-bot { padding-bottom: 0; }
.nopad-lft { padding-left: 0; }
.nopad-rgt { padding-right: 0; }

.nomarg { margin: 0; }
.nomarg-top { margin-top: 0; }
.nomarg-bot { margin-bottom: 0; }
.nomarg-lft { margin-left: 0; }
.nomarg-rgt { margin-right: 0; }

.flex-vertical
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.flex-horizontal
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

.flex-dynamic-1, .flex-dynamic-2
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
.grid
{
    display: grid;
    justify-content: stretch;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-flow: row;
    align-items: stretch;
}

.square
{
    aspect-ratio: 1;
}


/* ============ UTILITY TEXT ============ */

.text-gradient
{
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.color-primary { color: var(--color-primary); }
.color-accent { color: var(--color-accent); }
.color-light { color: var(--color-light); }
.color-dark { color: var(--color-dark); }

.grad-primary { background-image: var(--grad-primary); }
.grad-accent { background-image: var(--grad-accent); }
.grad-light { background-image: var(--grad-light); }
.grad-dark { background-image: var(--grad-dark); }

.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark); }

.light
{
    opacity: 0.75;
    font-weight: 300;
}

.heavy
{
    opacity: 1.0;
    font-weight: 700;
}

.left { text-align: left; }

.centered { text-align: center; align-self: center; justify-content:center; margin-inline: auto;}

.right { text-align: right; }

.large {font-size: 125%;}

.small {font-size: 75%;}


/* ============ UTILITY MEDIA ============ */

.cover-bg
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

.shadow-light-s { box-shadow: var(--shadow-light-s); }
.shadow-light-m { box-shadow: var(--shadow-light-m); }
.shadow-light-l { box-shadow: var(--shadow-light-l); }
.shadow-dark-s { box-shadow: var(--shadow-dark-s); }
.shadow-dark-m { box-shadow: var(--shadow-dark-m); }
.shadow-dark-l { box-shadow: var(--shadow-dark-l); }

.ignore-ptr
{
    pointer-events: none;
}
.ignore-ptr-self
{
    pointer-events: none;
    &>:not(.ignore-ptr-self){pointer-events: all;}
}


@media screen and (min-width: 750px)
{
    /* ============ TABLET ============ */

    .content
    {
        max-width: 750px;
    }

    .grid
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .flex-dynamic-1
    {
        flex-direction: row;
    }
}

@media screen and (min-width: 1200px) and (pointer: fine)
{
    /* ============ DESKTOP ============ */

    .content
    {
        max-width: 1200px;
    }
    
    .logo
    {
        .img-icon { display: none; }
        .img-full { display: block; }
    }

    .grid
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .flex-dynamic-2
    {
        flex-direction: row;
    }
}

@media (pointer: fine)
{
    .btn, k-carousel::part(nav-button)
    {
        /* class to do the hover effects for interactions like buttons */

        transform: scale(1);
        transition: transform var(--trans-fast);
        
        z-index: 0;
    }
    .btn:hover:not(:disabled), k-carousel::part(nav-button):hover:not(:disabled)
    {
        z-index: 1;

        transform: scale(1.05);
        cursor: pointer;
        z-index: 1;
        filter: brightness(1.2);
    }

}