@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Source+Sans+3:wght@400;600&display=swap');

@layer layout, base, components, background;

:root {
    /* Main color palette */
    --color-text: #1e1d20;
    --color-sunset-1: #d64a4a;
    --color-sunset-2: #ff8c5b;
    --color-sunset-3: #715eea;
    --color-shadow-1: 49, 44, 66;
    --color-shadow-2: 105, 87, 173;
    --color-foreground-primary: #fcfcfc;
    --color-background-primary: linear-gradient(180deg, 
                                              #fff8f6 0%, 
                                              #f5f7ff 100%);
    --color-foreground-border: #dcdcdc;
    --color-link-hover: calc(l - 0.25) c h;
    --color-light-mix: white 15%;
    --color-background-graph-base: linear-gradient(180deg, 
                                                rgba(255, 248, 246, 0.9) 0%, 
                                                rgba(245, 247, 255, 0.95) 100%);
    --color-background-graph-wash-1: repeating-linear-gradient(
                                        0deg,
                                        rgba(0, 0, 0, 0.03) 0px,
                                        rgba(0, 0, 0, 0.03) 1px,
                                        transparent 1px,
                                        transparent 24px
                                    );
    --color-background-graph-wash-2: repeating-linear-gradient(
                                        90deg,
                                        rgba(0, 0, 0, 0.05) 0px,
                                        rgba(0, 0, 0, 0.05) 1px,
                                        transparent 1px,
                                        transparent 24px
                                    );
    --shadow-displacement-down-1: 0 6px 18px;
    --shadow-displacement-down-2: 0 2px 4px;
    --shadow-displacement-up-1: 0 -6px 18px;
    --shadow-displacement-up-2: 0 -2px 4px;
    --shadow-alpha-soft: 0.1;
    --shadow-alpha-hard: 0.12;

    /* Relative units scaling */
    --scale-xs: 0.5rem;
    --scale-sm: 1rem;
    --scale-md: 1.5rem;
    --scale-lg: 2rem;
    --scale-xl: 3rem;

    /* Font weights */
    --font-weight-reg: 400;
    --font-weight-bld: 600;

    --font-display: "Poppins", "Segoe UI", Roboto, sans-serif;
    --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

    /* Animations */
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-slide-right: transform 0.25s ease-out;
    --transition-theme: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease;

    * {
        transition: background-color 0.5s ease,
                    border-color 0.5s ease,
                    color 0.1s ease,
                    text-underline-offset 0.1s ease;
    }
}

@layer layout {
    body {
        display: grid;
        grid-template-columns:
            minmax(var(--scale-sm, 1rem), 1fr)
            minmax(auto, 60rem)
            minmax(var(--scale-sm, 1rem), 1fr);
        grid-template-rows:
            6rem 
            1fr 
            auto;
        min-height: 100vh;
        gap: var(--scale-sm, 1rem);
    }

    header {
        grid-column: 2;
        grid-row: 1;
    }

    main {
        grid-column: 2;
        grid-row: 2;
    }

    footer {
        grid-column: 2;
        grid-row: 3
    }
}

@layer base {
    * {
        color: var(--color-text, #1e1d20);

        /* Reset base margin and padding */
        margin: 0;
        padding: 0;
    }

    body {
        font-family: var(--font-body);
    }

    header,
    main > section,
    main > section > div > article,
    footer {
        border: 1px solid var(--color-foreground-border, #dcdcdc);
    }

    ul, ol {
        padding-left: var(--scale-md, 1.5rem);
    }

    em {
        color: var(--color-sunset-1, #d64a4a);
        font-weight: var(--font-weight-bld, 600);
        font-style: normal;
    }

    a { 
        color: var(--color-sunset-3, #8b7aff);
        text-decoration: none;
    }
}

/********* Styling *********/
/* Header */
@layer component {
    header { 
        background: var(--color-foreground-primary, #fcfcfc);
        display: flex;
        flex-wrap: wrap;
        padding: var(--scale-sm, 1rem) var(--scale-lg, 2rem);
        align-items: center;
        justify-content: space-between;
        box-shadow:
            var(--shadow-displacement-down-1, 0 6px 18px)
            rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
            var(--shadow-displacement-down-2, 0 2px 4px)
            rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
        position: relative;
        z-index: 100;
        
        h1 {
            font-family: var(--font-display);
            font-weight: var(--font-weight-bld, 600);
            background-image: linear-gradient(90deg, var(--color-sunset-1), var(--color-sunset-3));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        nav {
            ul {
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                gap: var(--scale-sm, 1rem);
                
                li {
                    a {
                        text-decoration: none;
                        display: inline-block;
                        font-weight: var(--font-weight-bld, 600);
                        color: var(--color-sunset-3, #715eea);
                        position: relative;
                    }

                    a::after {
                        content: "";
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background: linear-gradient(90deg,
                        color-mix(in srgb, var(--color-sunset-1) 85%, var(--color-light-mix, white 15%)),
                        color-mix(in srgb, var(--color-sunset-3) 85%, var(--color-light-mix, white 15%))
                        );
                        transform: scaleX(0);
                        transition: var(--transition-slide-right);
                        transform-origin: right;
                    }

                    a:hover::after {
                        transform: scaleX(1);
                        transform-origin: left;
                    }
                }
            }
        }

        a:hover {
            color: oklch(from var(--color-sunset-3, #715eea) var(--color-link-hover, calc(l - 0.25) c h));
        }

        /* Hamburger Menu - CSS Only */
        .menu-toggle {
            display: none; /* Hide the checkbox */
        }

        .hamburger {
            display: none; /* Hidden by default */
            flex-direction: column;
            justify-content: space-between;
            width: var(--scale-lg, 2rem);
            height: var(--scale-md, 1.5rem);
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger span {
            display: block;
            width: 100%;
            height: 3px;
            background: var(--color-sunset-3);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* Animate hamburger to X when checked */
        .menu-toggle:checked ~ .hamburger span:nth-child(1) {
            transform: rotate(45deg) translate(0.5rem, 0.5rem);
        }

        .menu-toggle:checked ~ .hamburger span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle:checked ~ .hamburger span:nth-child(3) {
            transform: rotate(-45deg) translate(0.5rem, -0.5rem);
        }
    }
}

/* Main */
@layer component {
    main {
        /* Any section with a standalone picture gets centered portrait styling */
        section > picture:first-of-type img {
            display: block;
            margin: var(--scale-lg) auto;
            max-width: 300px;
            border-image: 
                linear-gradient(180deg, 
                    var(--color-sunset-2, #ff8c5b),
                    var(--color-sunset-1, #d64a4a)) 1; 
            border-width: var(--scale-xs, 0.5rem);
            border-style: solid;
        }

        noscript {
            display: block;
            background: color-mix(in srgb, var(--color-sunset-1) 10%, var(--color-foreground-primary));
            border-left: 4px solid var(--color-sunset-1);
            color: var(--color-text);
            padding: var(--scale-md, 1.5rem);
            border-radius: var(--scale-xs, 0.5rem);
            margin-bottom: var(--scale-lg, 2rem);
            font-weight: var(--font-weight-reg, 400);
        }

        #greeting {
            min-height: 30dvh;

            > * {
                margin: auto;
            }

            picture > img {
                display: block;
                margin-bottom: var(--scale-xl, 3rem);
                margin-left: auto;
                margin-right: auto;
                border-image: 
                    linear-gradient(180deg, 
                        var(--color-sunset-2, #ff8c5b),
                        var(--color-sunset-1, #d64a4a)) 1; 
                border-width: var(--scale-xs, 0.5rem);
                border-style: solid;
                width: 30%;
                height: 30%;
                transition: all var(--transition-bounce);
            }

            picture > img:hover {
                transform: scale(1.1);
            }

            h2 {
                text-align: center;
                margin-bottom: var(--scale-md, 1.5rem);
            }

            p {
                max-width: 65ch;
                text-align: center;
            }
        }

        > section {
            background: var(--color-foreground-primary, #fcfcfc);
            margin-bottom: var(--scale-lg, 2rem);
            padding: var(--scale-lg, 2rem);
            box-shadow:
                var(--shadow-displacement-down-1, 0 6px 18px)
                rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
                var(--shadow-displacement-down-2, 0 2px 4px)
                rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));

            h2 {
                font-family: var(--font-display);
                font-weight: var(--font-weight-bld, 600);
                background: linear-gradient(90deg,
                    color-mix(in srgb, var(--color-sunset-1, #d64a4a), var(--color-light-mix, white 15%)),
                    color-mix(in srgb, var(--color-sunset-3, #715eea), var(--color-light-mix, white 15%))
                );
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            h2, h3, p, ul {
                margin-bottom: var(--scale-sm, 1rem);
            }

            a {            
                color: var(--color-text, #1e1d20);
                font-weight: var(--font-weight-bld, 600);
                text-decoration: underline;
                text-underline-offset: 0.2rem;
                text-decoration-color: var(--color-sunset-3, #715eea); 

                &:hover {
                    color: oklch(from var(--color-sunset-3, #715eea) var(--color-link-hover, calc(l - 0.25) c h));
                    text-underline-offset: 0.4em;
                }
            }
        }

       /* Highlights section */
        section .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
            gap: var(--scale-lg);
            margin-top: var(--scale-md);

            article {
                background: var(--color-foreground-primary, #fcfcfc);
                border-radius: var(--scale-sm, 1rem);
                overflow: hidden;
                box-shadow:
                    var(--shadow-displacement-down-1, 0 6px 18px)
                    rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
                    var(--shadow-displacement-down-2, 0 2px 4px)
                    rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
                display: flex;
                flex-direction: column;
                transition: transform 0.2s ease, box-shadow 0.2s ease;

                /* Card Content */
                h3 {
                    font-family: var(--font-display, 400);
                    font-weight: var(--font-weight-bld, 600);
                    margin: var(--scale-md, 1.5rem) var(--scale-md, 1.5rem) var(--scale-xs, 0.5rem);
                }

                p {
                    margin: 0 var(--scale-md, 1.5rem) var(--scale-md, 1.5rem);
                }

                a {
                    margin: auto var(--scale-md, 1.5rem) var(--scale-md, 1.5rem);
                }
            }

            article:hover {
                transform: translateY(-4px);
            }

            /* Card picture */
            picture {
                display: block;
                width: 100%;
                aspect-ratio: 3 / 2;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
        }

        /* Horizontal project cards - list view */
        section .project-list {
            display: flex;
            flex-direction: column;
            gap: var(--scale-lg, 2rem);
            margin-top: var(--scale-md, 1.5rem);

            project-card {
                padding: var(--scale-md, 1.5rem);
                display: grid;
                grid-template-columns: 7.5rem 1fr;
                grid-template-rows: 1fr;
                background: var(--color-foreground-primary, #fcfcfc);
                border-radius: var(--scale-sm, 1rem);
                overflow: hidden;
                box-shadow:
                    var(--shadow-displacement-down-1, 0 6px 18px)
                    rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
                    var(--shadow-displacement-down-2, 0 2px 4px)
                    rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
                align-items: stretch;
                transition: transform 0.2s ease, box-shadow 0.2s ease;

                picture {
                    grid-column: 1;
                    grid-row: 1 / -1;
                    width: 7.5rem;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img { 
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }
                }

                div {
                    grid-column: 2;
                    grid-row: 1 / -1;
                    padding: 0 0 0 var(--scale-md, 1.5rem);
                    display: flex;
                    flex-direction: column;

                    h3 {
                        font-family: var(--font-display);
                        font-weight: var(--font-weight-bld, 600);
                        margin-bottom: var(--scale-xs, 0.5rem);
                        color: var(--color-text, #1e1d20);
                    }

                    p {
                        flex: 1;
                        line-height: 1.6;
                        margin-bottom: var(--scale-sm, 1rem);
                        color: var(--color-text, #1e1d20);
                    }

                    a {
                        align-self: flex-start;
                        font-weight: var(--font-weight-bld, 600);
                        color: var(--color-sunset-3, #715eea);
                        text-decoration: none;
                    }

                    a:hover {
                        color: oklch(from var(--color-sunset-3, #715eea) var(--color-link-hover, calc(l - 0.25) c h));
                    }
                }

                &:hover {
                    transform: translateX(8px);
                }
            }
        }
    }
}

/* Footer */
@layer component {
    footer {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        gap: var(--scale-xl, 2rem);
        background: var(--color-foreground-primary, #fcfcfc);
        padding: var(--scale-lg, 2rem);
        box-shadow:
            var(--shadow-displacement-up-1, 0 -6px 18px)
            rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
            var(--shadow-displacement-up-2, 0 -2px 4px)
            rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));

        h1 {
            font-family: var(--font-display);
            font-weight: var(--font-weight-bld, 600);
            background-image: linear-gradient(90deg, var(--color-sunset-1), var(--color-sunset-3));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        h2 {
            font-size: var(--scale-sm, 1rem);
            color: var(--color-text);
            margin-bottom: var(--scale-xs, 0.5rem);
        }

        a {
            color: color-mix(in srgb, var(--color-text) 60%, transparent);

            &:hover {
                color: var(--color-sunset-3);

                svg {
                    fill: var(--color-sunset-3);
                }
            }
        }

        section {
            display: flex;
            flex-direction: column;
            gap: var(--scale-xs, 0.5rem);
    
            ul {
                list-style: none;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: var(--scale-xs, 0.5rem);
            }

            div {
                display: flex;
                flex-direction: column;
                gap: var(--scale-xs, 0.5rem);

                a {
                    display: flex;
                    align-items: center;
                    gap: var(--scale-xs, 0.5rem);
                    transition: color 0.2s ease;
                    
                    svg {
                        fill: color-mix(in srgb, var(--color-text) 60%, transparent);
                        flex-shrink: 0;
                    }
                }

                button {
                    display: flex;
                    font: inherit;
                    text-align: left;
                    color: color-mix(in srgb, var(--color-text) 60%, transparent);
                    gap: var(--scale-xs, 0.5rem);
                    background: none;
                    border: none;
                    cursor: pointer;
                    transition: color 0.2s ease;
                    align-items: center;

                    svg {
                        fill: color-mix(in srgb, var(--color-text) 60%, transparent);
                    }
                    
                    &:hover {
                        color: var(--color-sunset-3);

                        svg {
                            fill: var(--color-sunset-3);
                        }
                    }
                }

                #theme-icon {
                    position: relative;
                    display: block;
                }

                #sun, #moon {
                    transform-origin: center;
                    transition: var(--transition-theme);
                }
            }
        }
    }
}

/* Graph-like background */
@layer background {
    body {
        background: var(--color-background-primary, linear-gradient(180deg, #fff8f6 0%, #f5f7ff 100%));
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* Base gradient wash (sunset-like) */
        background:
            var(--color-background-graph-base, 
                linear-gradient(180deg, 
                              rgba(255, 248, 246, 0.9) 0%, 
                              rgba(245, 247, 255, 0.95) 100%)),
            var(--color-background-graph-wash-1,
                repeating-linear-gradient(
                    0deg,
                    rgba(0, 0, 0, 0.03) 0px,
                    rgba(0, 0, 0, 0.03) 1px,
                    transparent 1px,
                    transparent 24px)),
            var(--color-background-graph-wash-2,
                repeating-linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.03) 0px,
                rgba(0, 0, 0, 0.03) 1px,
                transparent 1px,
                transparent 24px));
        background-blend-mode: multiply;
    }

    main, header, footer {
        position: relative;
        z-index: 1;
    }
}  

body[data-page="home"] {
    header, main, footer {
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards;
    }

    header {
        animation-delay: 0.1s;
    }

    main {
        animation-delay: 0.3s;
    }

    footer {
        animation-delay: 0.6s;
    }
}

body[data-page="experience"] {
    main > section {
        background: var(--color-foreground-primary, #fcfcfc);
        box-shadow: 
            var(--shadow-displacement-down-1, 0 6px 18px) rgba(var(--color-shadow-1, 49,44,66), var(--shadow-alpha-soft, 0.1));
        padding: var(--scale-lg, 2rem);

        > section {
            background: none;
            box-shadow: none;
            border: none;
            border-radius: 0;
            padding: 0;
            margin: 0 0 var(--scale-lg, 2rem);

            h3 {
                background: none;
                -webkit-text-fill-color: initial;
                color: var(--color-text, #1e1d20);
                margin: 0 0 var(--scale-sm, 1rem);
                font-weight: var(--font-weight-bld, 600);
                font-family: var(--font-display);
            }

            p {
                margin: 0 0 var(--scale-sm, 1rem);
            }

            /* Timeline styles */
            ul {
                list-style: none;
                padding: 0;
                margin: var(--scale-lg, 2rem) 0 0 0;
                position: relative;

                li {
                    padding-bottom: var(--scale-lg, 2rem);
                    border-left: 2px solid var(--color-sunset-3, #715eea);
                    position: relative;
                    padding-left: var(--scale-lg, 2rem);
                    margin-left: var(--scale-sm, 1rem);

                    &:last-child {
                        border-left: 0;
                        padding-bottom: 0;
                    }

                    &::before {
                        content: '';
                        width: var(--scale-sm, 1rem);
                        height: var(--scale-sm, 1rem);
                        background: var(--color-foreground-primary, #fcfcfc);
                        border: 2px solid var(--color-sunset-3, #715eea);
                        box-shadow: 3px 3px 0px color-mix(in srgb, var(--color-sunset-3, #715eea) 40%, transparent);
                        border-radius: 50%;
                        position: absolute;
                        left: calc(-15px / 2 - 2px - 1px);
                        top: 0;
                    }

                    time {
                        display: block;
                        color: var(--color-sunset-3, #715eea);
                        font-family: var(--font-display);
                        font-weight: var(--font-weight-bld, 600);
                        font-size: 1.1rem;
                        margin-bottom: var(--scale-xs, 0.5rem);
                    }

                    h4 {
                        background: none;
                        -webkit-text-fill-color: initial;
                        color: var(--color-text, #1e1d20);
                        margin: 0 0 var(--scale-xs, 0.5rem);
                        font-weight: var(--font-weight-bld, 600);
                        font-family: var(--font-body);
                        font-size: var(--scale-sm, 1rem);
                    }

                    p {
                        color: color-mix(in srgb, var(--color-text, #1e1d20) 80%, transparent);
                        line-height: 1.6;
                        margin: 0;
                    }
                }
            }
        }
    }
}

/********* Animations *********/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@view-transition {
    navigation: auto;
}

/********* Screen Media Queries *********/
/* ===== Small Screens: mobile phones ===== */
@media (max-width: 42.5em) {
    body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    header, main, footer {
        grid-column: 1;

        noscript {
            border: none;
        }
    }

    header {
        top: 0;
        padding: var(--scale-sm) var(--scale-md);
        z-index: 1000;  /* Ensure it's on top */

        /* Hide nav by default on mobile */
        nav {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--color-foreground-primary);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            box-shadow: 0 4px 12px rgba(var(--color-shadow-1), 0.15);
            z-index: 101;  /* Higher than header */

            ul {
                flex-direction: column;
                padding: var(--scale-md);
                gap: var(--scale-xs);
            }

            li {
                width: 100%;
            }

            a {
                display: block;
                padding: var(--scale-sm);
                text-align: center;
                border-radius: 0.5rem;
                transition: background 0.2s ease;
            }

            a:hover {
                background: color-mix(in srgb, var(--color-sunset-3) 10%, transparent);
            }
        }
    }

    /* Show hamburger on mobile */
    .hamburger {
        display: flex;
    }

    /* Show nav when checkbox is checked */
    .menu-toggle:checked ~ nav {
        max-height: 400px;
    }

    main > section {
        padding: var(--scale-md);
        margin-bottom: var(--scale-md);
    }

    #greeting picture > img {
        width: 60%;
        height: auto;
        margin-bottom: var(--scale-md);
    }

    section > picture:first-of-type img {
        max-width: 60%;
        height: auto;
        margin-bottom: var(--scale-md);
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--scale-md);
    }

    footer {
        grid-template-columns: 1fr;
        padding: var(--scale-md);
        gap: var(--scale-lg, 2rem);
        font-size: 0.9rem;
    }

    body[data-page="contact"] {
        form {
            padding: var(--scale-md, 1.5rem);

            fieldset {
                grid-template-columns: 1fr;
                gap: var(--scale-sm, 1rem);
            }

            input[type="submit"] {
                width: 100%;
                padding: var(--scale-md, 1.5rem);
            }
        }
    }

    .project-list project-card {
        grid-template-columns: 1fr;
        
        picture {
            display: none;
        }
        
        div {
            padding: 0;
        }
    }
}

/* ===== Medium Screens: tablets & small laptops ===== */
@media (min-width: 42.5em) and (max-width: 64em) {
    header {
        flex-wrap: wrap;
        padding: var(--scale-md) var(--scale-lg);

        nav ul {
            gap: var(--scale-sm);
        }
    }

    #greeting picture > img {
        width: 40%;
    }

    section > picture:first-of-type img {
        max-width: 250px;
    }

    main > section {
        padding: var(--scale-lg);
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
}

/* ===== Large Screens: desktop ===== */
@media (min-width: 64em) {
    header {
        padding: var(--scale-md) var(--scale-xl);
    }

    main > section {
        padding: var(--scale-xl);
    }

    h1, h2, h3 {
        line-height: 1.2;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    }
}

/* ===== User Preferences ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #e8e6f0;
        --color-sunset-1: #ff6b6b;      
        --color-sunset-2: #ff9a5c;      
        --color-sunset-3: #8b7aff;  
        --color-shadow-1: 90, 95, 130;
        --color-shadow-2: 255, 107, 107;
        --color-foreground-primary: #0c0c10;
        --color-background-primary: linear-gradient(180deg, 
                                                  #0a0a0e 0%,
                                                  #0e0e12 100%);
        --color-foreground-border: #807e7d3d;
        --color-link-hover: calc(l * 1.25) c h;
        --color-background-graph-base: linear-gradient(180deg, 
                                         rgba(23, 18, 16, 0.8) 0%, 
                                         rgba(10, 8, 19, 0.9) 100%);
        --color-background-graph-wash-1: repeating-linear-gradient(
                                            0deg,
                                            rgba(255, 255, 255, 0.31) 0px,
                                            rgba(255, 255, 255, 0.31) 1px,
                                            transparent 1px,
                                            transparent 24px
                                        );
        --color-background-graph-wash-2: repeating-linear-gradient(
                                            90deg,
                                            rgba(255, 255, 255, 0.36) 0px,
                                            rgba(255, 255, 255, 0.36) 1px,
                                            transparent 1px,
                                            transparent 24px
                                        );   
    }
}

[data-theme="dark"] {
    --color-text: #e8e6f0;
    --color-sunset-1: #ff6b6b;      
    --color-sunset-2: #ff9a5c;      
    --color-sunset-3: #8b7aff;  
    --color-shadow-1: 90, 95, 130;
    --color-shadow-2: 255, 107, 107;
    --color-foreground-primary: #0c0c10;
    --color-background-primary: linear-gradient(180deg, 
                                                  #0a0a0e 0%,
                                                  #0e0e12 100%);
    --color-foreground-border: #807e7d3d;
    --color-link-hover: calc(l * 1.25) c h;
    --color-background-graph-base: linear-gradient(180deg, 
                                         rgba(23, 18, 16, 0.8) 0%, 
                                         rgba(10, 8, 19, 0.9) 100%);
    --color-background-graph-wash-1: repeating-linear-gradient(
                                            0deg,
                                            rgba(255, 255, 255, 0.31) 0px,
                                            rgba(255, 255, 255, 0.31) 1px,
                                            transparent 1px,
                                            transparent 24px
                                        );
    --color-background-graph-wash-2: repeating-linear-gradient(
                                            90deg,
                                            rgba(255, 255, 255, 0.36) 0px,
                                            rgba(255, 255, 255, 0.36) 1px,
                                            transparent 1px,
                                            transparent 24px
                                        );

    #sun {
        opacity: 0;
        transform: scale(0.5) rotate(90deg);
        transform-origin: center;
        transition: var(--transition-theme);
    }

    #moon {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        transform-origin: center;
        transition: var(--transition-theme);
    }
}

[data-theme="light"] {
    --color-text: #1e1d20;
    --color-sunset-1: #d64a4a;
    --color-sunset-2: #ff8c5b;
    --color-sunset-3: #715eea;
    --color-shadow-1: 49, 44, 66;
    --color-shadow-2: 105, 87, 173;
    --color-foreground-primary: #fcfcfc;
    --color-background-primary: linear-gradient(180deg, 
                                              #fff8f6 0%, 
                                              #f5f7ff 100%);
    --color-foreground-border: #dcdcdc;
    --color-link-hover: calc(l - 0.25) c h;
    --color-light-mix: white 15%;
    --color-background-graph-base: linear-gradient(180deg, 
                                                rgba(255, 248, 246, 0.9) 0%, 
                                                rgba(245, 247, 255, 0.95) 100%);
    --color-background-graph-wash-1: repeating-linear-gradient(
                                        0deg,
                                        rgba(0, 0, 0, 0.03) 0px,
                                        rgba(0, 0, 0, 0.03) 1px,
                                        transparent 1px,
                                        transparent 24px
                                    );
    --color-background-graph-wash-2: repeating-linear-gradient(
                                        90deg,
                                        rgba(0, 0, 0, 0.05) 0px,
                                        rgba(0, 0, 0, 0.05) 1px,
                                        transparent 1px,
                                        transparent 24px
                                    );

    #sun {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        transform-origin: center;
        transition: var(--transition-theme);
    }

    #moon {
        opacity: 0;
        transform: scale(0.5) rotate(-90deg);
        transform-origin: center;
        transition: var(--transition-theme);
    }
}