styles.css

@layer tokens, typography, base, layout, components, utilities;

@layer tokens {
    :root {
        /* Fonts */
        --font-heading: system-ui;
        --font-body: system-ui;

        /* Fluid Typography Scale */
        --font-2xs: clamp(0.58rem, calc(0.55rem + 0.15vw), 0.67rem);
        --font-xs: clamp(0.69rem, calc(0.66rem + 0.18vw), 0.8rem);
        --font-sm: clamp(0.83rem, calc(0.78rem + 0.24vw), 0.96rem);
        --font-base: clamp(1rem, calc(0.94rem + 0.32vw), 1.15rem);
        --font-lg: clamp(1.2rem, calc(1.12rem + 0.42vw), 1.38rem);
        --font-xl: clamp(1.44rem, calc(1.34rem + 0.55vw), 1.66rem);
        --font-2xl: clamp(1.73rem, calc(1.6rem + 0.73vw), 1.99rem);
        --font-3xl: clamp(2.07rem, calc(1.91rem + 0.96vw), 2.38rem);
        --font-4xl: clamp(2.49rem, calc(2.28rem + 1.27vw), 2.86rem);
        --font-5xl: clamp(2.99rem, calc(2.73rem + 1.68vw), 3.43rem);
        --font-6xl: clamp(3.58rem, calc(3.27rem + 2.22vw), 4.12rem);
        --font-7xl: clamp(4.3rem, calc(3.92rem + 2.93vw), 4.94rem);
        --font-8xl: clamp(5.16rem, calc(4.7rem + 3.87vw), 5.93rem);
        --font-9xl: clamp(6.19rem, calc(5.64rem + 5.11vw), 7.12rem);

        /* Colors */
        --color-primary: oklch(58% 0.28 250);
        --color-secondary: oklch(57% 0.27 220);
        --color-tertiary: oklch(15% 0.28 250);
        --color-base: oklch(96.69% 0.0013 106.42);
        --color-surface: oklch(98.5% 0.0013 106.42);
        --color-text: oklch(21.01% 0.014 87.55);
        --color-subtle: oklch(45% 0.014 87.55);
        --color-light: oklch(96.69% 0.0013 106.42);
        --color-dark: oklch(21.01% 0.014 87.55);

        /* Status Colors */
        --color-success: oklch(0.62 0.24 140);
        --color-warning: oklch(0.74 0.22 80);
        --color-error: oklch(0.66 0.26 20);
        --color-info: oklch(0.62 0.24 250);

        /* Radius */
        --radius-small: 8px;
        --radius-medium: 12px;
        --radius-large: 16px;
        --radius-full: 9999px;

        /* Effects */
        --color-overlay: oklch(0.2 0.1 260 / 0.2);
        --color-shadow: oklch(0.2 0.1 260 / 0.1);
        --gradient-primary: linear-gradient(
            to bottom right,
            var(--color-primary),
            var(--color-secondary)
        );
    }
}

@layer base {
    html {
        font-family: var(--font-body);
        font-size: var(--font-base);
        background: var(--color-base);
        color: var(--color-text);
        text-wrap: pretty;
    }

    html,
    body {
        max-width: 100vw;
        margin: 0;
        padding: 0;
        contain: paint;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-base: oklch(21.01% 0.014 87.55);
            --color-text: oklch(96.69% 0.0013 106.42);
            --color-subtle: oklch(75% 0.014 106.42);
            --color-surface: oklch(24% 0.014 87.55);
        }
    }
}

@layer typography {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-heading);
        text-wrap: balance;
    }

    h1 {
        margin-bottom: 0;
        line-height: 1.1;
        font-size: var(--font-7xl);
    }

    a {
        color: inherit;
        text-decoration: none;

        &:hover:not(#logo, .btn) {
            text-decoration: underline;
        }
    }
}

@layer layout {
    /* Basic Layout Structures */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }

    p {
        max-width: 40ch;

        @media (min-width: 640px) {
            max-width: 65ch;
        }
    }

    /* Header Layout */
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        position: relative;
        height: 50px;

        @media (min-width: 640px) {
            width: 100%;
            max-width: 1024px;
            margin: 0 auto;
        }
    }

    /* Main Layout */
    main {
        flex: 1 0 auto;
        width: 100%;
        height: 70dvh;
        max-width: 1024px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        @media (min-width: 768px) {
            padding: 0;
        }
    }

    section {
        max-width: 960px;
        padding: 1.25rem 0 3rem;

        &.hero {
            margin-top: 0;
            padding-top: 1.25rem;

            .background {
                position: absolute;
                top: 0;
                left: 0;
                height: 100dvh;
                width: 200%;
                z-index: -10;
                overflow: hidden;

                /* Base dots layer */
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(
                        oklch(25% 0.0013 106.42) 1px,
                        transparent 1px
                    );
                    background-size: 16px 16px;
                    -webkit-mask-image: radial-gradient(
                        ellipse 50% 50% at 50% 50%,
                        #000 70%,
                        transparent 100%
                    );
                    mask-image: radial-gradient(
                        ellipse 50% 50% at 50% 50%,
                        #000 70%,
                        transparent 100%
                    );
                }

                /* Animated layers */
                &::after,
                .dots-layer-1,
                .dots-layer-2 {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(
                        var(--color-primary) 1px,
                        transparent 1px
                    );
                    background-size: 16px 16px;
                    opacity: 0;
                    -webkit-mask-image: radial-gradient(
                        ellipse 50% 50% at 50% 50%,
                        #000 70%,
                        transparent 100%
                    );
                    mask-image: radial-gradient(
                        ellipse 50% 50% at 50% 50%,
                        #000 70%,
                        transparent 100%
                    );
                }

                &::after {
                    animation: twinkle 4s infinite;
                    animation-delay: 10s;
                }
            }
        }

        &.dashboard {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0 1rem;
            height: 100%;
            max-width: 768px;
            margin: 0 auto;

            header {
                width: 90vw;
                padding: 1rem 0;
                margin-bottom: 1rem;

                h1 {
                    font-size: var(--font-2xl);
                    margin: 0;
                }
            }

            main {
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
                justify-content: space-between;
                height: 100%;
                flex-grow: 1;
            }

            @media (min-width: 640px) {
                justify-content: center;

                main {
                    flex-direction: column;
                    justify-content: flex-start;
                }
            }
        }
    }

    /* Grid Layouts */
    .grid {
        display: grid;
        padding: 6rem 0;
        position: relative;

        .text {
            display: flex;
            flex-direction: column;
            padding: 0 1rem;
            justify-content: center;
            order: 2;
            padding-bottom: 3rem;

            .subtitle {
                font-weight: 700;
            }

            h2 {
                font-size: 56px;
            }

            p {
                font-size: 18px;
                margin: 1.5rem 0;
            }
        }

        img {
            margin: 0 auto;
            order: 1;
        }

        @media (min-width: 960px) {
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
            padding: 3rem;

            .text {
                order: 1;
                width: 100%;
                padding: 0;
                margin: 0;
            }

            img {
                width: clamp(500px, 30vw, 550px);
                order: 2;
                margin-right: -5rem;
                max-height: 600px;
            }

            &.sticky,
            &.slant {
                gap: 6rem;
            }

            &.sticky {
                align-items: start;

                .left {
                    display: flex;
                    flex-direction: column;
                    gap: 6rem;
                }

                .right {
                    height: 100dvh;
                    display: grid;
                    gap: 6rem;

                    .container {
                        position: sticky;
                        top: 2rem;

                        img {
                            width: min(600px, 30vw);
                            margin-right: 0;
                        }

                        :nth-child(1) {
                            top: 2rem;
                        }
                        :nth-child(2) {
                            top: calc(2rem + 33%);
                        }
                        :nth-child(3) {
                            top: calc(2rem + 66%);
                        }
                    }
                }
            }

            &.slant {
                position: relative;
                margin-bottom: 0;

                &::before {
                    content: "";
                    position: absolute;
                    left: 50%;
                    right: 50%;
                    margin-left: -50vw;
                    margin-right: -50vw;
                    width: 100vw;
                    height: 100dvh;
                    padding: 2rem 0;
                    background: var(--color-tertiary);
                    z-index: -1;
                    clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0 100%);
                }

                .text {
                    padding-bottom: 0;
                }
            }
        }
    }

    /* Footer Layout */
    footer {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        color: var(--color-subtle);
        padding-bottom: 1.5rem;
        width: 100%;
        margin-top: 2rem;
    }
}

@layer components {
    /* Navigation Components */
    #logo {
        font-size: var(--font-3xl);
        font-weight: 700;
    }

    nav {
        background: var(--color-surface);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border: 0;
        border-radius: var(--radius-medium);
        min-width: 100px;
        padding: 1rem;
        z-index: 50;
        position: absolute;
        inset: unset;
        margin: 4.5rem 1.5rem;
        top: 0;
        right: 0;
        opacity: 0;
        transform: translateY(-10px);
        transition:
            opacity 0.5s,
            transform 0.5s,
            display 0.5s ease-in-out;

        &:popover-open {
            @starting-style {
                opacity: 0;
                transform: translateY(-10px);
            }
            opacity: 1;
            transform: translateY(0);
        }

        @media (min-width: 640px) {
            display: block;
            position: static;
            background: transparent;
            box-shadow: none;
            min-width: 0;
            margin: 0;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }

    /* Menu Icon Component */
    .menu-icon {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 5px;

        span {
            width: 25px;
            height: 1.5px;
            background: var(--color-subtle);
            transition: 0.3s;
            border-radius: var(--radius-small);
        }

        @media (min-width: 640px) {
            display: none;
        }
    }

    /* Dialog Component */
    dialog {
        color: var(--color-text);
        border: none;
        background: transparent;

        &.small {
            top: -250px;
        }

        &::backdrop {
            background: var(--color-overlay);
            backdrop-filter: blur(6px);
        }
    }

    /* Button Components */
    button,
    .btn {
        background: var(--color-text);
        border-radius: var(--radius-small);
        color: var(--color-base);
        font-size: var(--font-2xs);
        font-weight: 600;
        padding: 0.6rem 0.7rem;
        border: 0;
        cursor: pointer;
        position: relative;

        &.primary {
            background: var(--gradient-primary);
            color: var(--color-light);
        }

        &.destructive {
            background: var(--color-error);
            color: var(--color-light);
            font-weight: bold;
        }

        &.unstyle {
            background: none;
            border-radius: 0;
            font-size: inherit;
            font-weight: inherit;
            padding: 0;
        }

        .popover {
            position: absolute;
            visibility: hidden;
            background: var(--color-text);
            color: var(--color-base);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: var(--font-2xs);
            white-space: nowrap;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            pointer-events: none;

            /* Triangle pointer */
            &::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 4px solid transparent;
                border-top-color: var(--color-text);
            }
        }

        &:hover .popover {
            visibility: visible;
        }
    }

    .btn-group {
        display: flex;
        align-items: center;
        gap: .1rem;

        &.col {
            flex-direction: column;

            @media (min-width: 640px) {
                flex-direction: row;
            }
        }
    }

    /* Feature Component */
    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        .icon {
            font-size: var(--font-4xl);
            margin-bottom: 0.5rem;
        }

        h2,
        p {
            margin: 0.25rem 0;
        }
    }

    /* CTA Component */
    .cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: var(--radius-medium);
        background: var(--color-surface);
        padding: 1rem;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: linear-gradient(
                90deg,
                var(--color-primary),
                var(--color-secondary),
                var(--color-primary)
            );
            border-radius: calc(var(--radius-medium) + 3px);
            z-index: -1;
            animation: rotate 9s linear infinite;
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            padding: 2px;
        }

        &::after {
            content: "";
            position: absolute;
            inset: -2px;
            background: inherit;
            border-radius: calc(var(--radius-medium) + 3px);
            z-index: -2;
        }

        h2 {
            margin: 0;
        }

        p {
            text-align: center;
            max-width: 95%;
        }

        @media (min-width: 640px) {
            width: auto;
            max-width: 500px;
            padding: 1.5rem 2rem;
            margin: 3px auto;

            p {
                max-width: 400px;
            }
        }
    }

    /* Form Components */
    .auth-form {
        width: 72.8vw;
        margin: 0 auto;

        h1 {
            font-size: var(--font-3xl);
            margin: 0 0 1rem;
        }

        button {
            width: 100%;
            padding: 0.8rem 0;
        }

        a {
            font-size: var(--font-2xs);
            color: var(--color-subtle);
            font-weight: 300;
        }

        @media (min-width: 640px) {
            width: 250px;
            position: static;
        }
    }

    .form-group {
        width: 91.6%;
        margin-bottom: 1.2rem;

        label {
            display: block;
            font-size: var(--font-xs);
            font-weight: 500;
            margin-bottom: 6px;
        }

        input {
            width: 100%;
            padding: 0.5rem 1rem;
            line-height: 24px;
            font-weight: 700;
            color: var(--color-text);
            background: var(--color-light);
            border: 1px solid var(--color-subtle);
            border-radius: 8px;
            position: relative;

            @media (prefers-color-scheme: dark) {
                color: var(--color-dark);
            }

            &::placeholder {
                color: #9ca3af;
                font-weight: 600;
                position: relative;
                top: 0;
                opacity: 1;
                transition:
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
            }

            &:focus {
                outline: 1px solid
                    color-mix(in srgb, var(--color-info) 90%, white);
                border-color: var(--color-info);
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

                &::placeholder {
                    transform: translateY(-150%);
                    opacity: 0;
                }
            }
        }

        @media (min-width: 640px) {
            width: 90%;
        }
    }

    /* Add Todo Form */
    .todo-form {
        display: grid;
        place-items: center;
        width: 100%;
        margin-top: auto;

        .form-group .inputs {
            display: flex;
            align-items: center;
            justify-content: center;

            input {
                border-radius: var(--radius-small) 0 0 var(--radius-small);
            }

            .btn {
                width: 64px;
                border-radius: 0 8px 8px 0;
                font-size: var(--font-xs);
                border-left: 0;
            }
        }
    }

    /* Todo List Container */
    .list-container {
        width: 100%;
        display: grid;
        place-items: center;
        flex-grow: 1;
    }

    /* Todo List Component */
    .todo-list {
        width: 90%;
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Todo Item Component */
    .todo-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: var(--color-surface);
        border-radius: var(--radius-small);
        transition: all 0.3s ease;
        width: 100%;
        max-width: 768px;

        /* Checkbox styling */
        .todo-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-subtle);
            border-radius: var(--radius-small);
            cursor: pointer;
            appearance: none;
            position: relative;
            transition: all 0.3s ease;

            &:checked {
                background: var(--color-success);
                border-color: var(--color-success);
            }

            &:checked::after {
                content: "✓";
                color: var(--color-light);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: var(--font-xs);
            }

            &:focus {
                outline: 2px solid var(--color-info);
                outline-offset: 2px;
            }
        }

        /* Todo title styling */
        .todo-title {
            flex-grow: 1;
            font-weight: 500;
            border: 0;
            color: var(--color-text);
            background: transparent;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
        }

        /* Delete button styling */
        .todo-action {
            opacity: 0;
            transform: translateX(10px);
            transition: all 0.3s ease;
        }

        &:hover {
            .todo-action {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Completed state */
        &.completed {
            background: color-mix(
                in srgb,
                var(--color-surface) 97%,
                var(--color-success)
            );

            .todo-title {
                text-decoration: line-through;
                color: var(--color-subtle);
            }
        }

        /* Focus state for keyboard navigation */
        &:focus-within {
            outline: 2px solid var(--color-info);
            outline-offset: 2px;
        }
    }
}

@layer animation {
    @keyframes twinkle {
        0%,
        100% {
            opacity: 0;
            transform: translateX(0);
        }
        25% {
            opacity: 0.5;
            transform: translateX(-8px);
        }
        50% {
            opacity: 0;
            transform: translateX(-16px);
        }
    }

    @keyframes rotate {
        0%,
        100% {
            clip-path: inset(0px 0px 100% 0px);
        }
        25% {
            clip-path: inset(0px 0px 0px 100%);
        }
        50% {
            clip-path: inset(100% 0px 0px 0px);
        }
        75% {
            clip-path: inset(0px 100% 0px 0px);
        }
    }
}

@layer utilities {
    .gradient-highlight {
        background-image: var(--gradient-primary);
        background-clip: text;
        color: transparent;
    }

    .surface {
        padding: 2rem;
        border-radius: var(--radius-medium);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        background: var(--color-surface);
    }

    .error {
        background: var(--color-error);
        width: 100%;
        padding: 0.5rem;
        border-radius: var(--radius-small);
        font-size: var(--font-xs);
        font-weight: 600;
    }

    /* Additional utility classes for font sizes */
    .text-xs {
        font-size: var(--font-xs);
    }

    .text-sm {
        font-size: var(--font-sm);
    }

    .text-base {
        font-size: var(--font-base);
    }

    .text-lg {
        font-size: var(--font-lg);
    }

    .text-xl {
        font-size: var(--font-xl);
    }

    .text-2xl {
        font-size: var(--font-2xl);
    }

    .text-3xl {
        font-size: var(--font-3xl);
    }

    .text-4xl {
        font-size: var(--font-4xl);
    }
}