/* Theme layer - colors, backgrounds, shadows only */
@layer theme {
    @scope (.signin-page) {
        .signin-info {
            .tagline {
                color: var(--text-secondary);
            }

            .features li {
                background: var(--surface-elevated);
                border-color: var(--border-color);

                &:hover {
                    border-color: var(--accent-primary);
                }

                .feature-icon {
                    background: oklch(65% 0.15 270 / 0.1);
                    border-color: oklch(65% 0.15 270 / 0.2);
                    color: var(--accent-primary);
                }

                p {
                    color: var(--text-secondary);
                }
            }

            .stats li {
                color: var(--text-secondary);
            }

            .stats .stat-value {
                color: var(--text-primary);
            }
        }

        .signin-card {
            &::before {
                background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
            }

            h2 {
                color: var(--text-primary);
            }

            .subtitle {
                color: var(--text-secondary);
            }

            .oauth-button {
                background: var(--surface-base);
                border-color: var(--border-color);
                color: var(--text-primary);

                &:hover {
                    background: var(--surface-elevated);
                    border-color: var(--accent-primary);
                }
            }

            .google-button:hover {
                border-color: oklch(62% 0.16 260);
                background: oklch(62% 0.16 260 / 0.05);
            }

            .microsoft-button:hover {
                border-color: oklch(65% 0.18 230);
                background: oklch(65% 0.18 230 / 0.05);
            }

            .terms-text {
                color: var(--text-secondary);

                a {
                    color: var(--accent-primary);
                }
            }

            .divider {
                color: var(--text-secondary);

                &::before, &::after {
                    background: var(--border-color);
                }
            }

            input {
                background: transparent;
                color: var(--text-primary);

                &::placeholder {
                    color: var(--text-secondary);
                }
            }

            .submit-button {
                background: var(--text-primary);
                color: var(--bg-primary);
            }

            .signup-link {
                color: var(--text-secondary);
            }
        }
    }
}

/* Components layer - layout, sizing, spacing only */
@layer components {
    @scope (.signin-page) {
        :scope {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3xl);
            padding: var(--space-3xl) var(--wire-gap);
            justify-content: center;
            align-items: flex-start;
            min-block-size: calc(100dvb - 60px);
            padding-block: 3rem;
        }

        .signin-info {
            flex: 1;
            min-inline-size: 280px;
            max-inline-size: 500px;
            display: flex;
            flex-direction: column;
            gap: var(--space-xl);

            h1 {
                font-size: clamp(1.75rem, 4vw, 2.25rem);
                font-weight: var(--fw-bold);
                line-height: 1.2;
            }

            .features {
                display: flex;
                flex-direction: column;
                gap: var(--space-lg);

                li {
                    display: flex;
                    gap: var(--wire-gap);
                    align-items: flex-start;
                    padding: var(--space-md);
                    border: var(--wire-border);
                    border-radius: var(--wire-radius);
                    transition: all 0.15s ease-out;

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

                .feature-icon {
                    flex-shrink: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    inline-size: var(--space-3xl);
                    block-size: var(--space-3xl);
                    border: var(--wire-border);
                    border-radius: var(--wire-radius);
                    font-size: var(--fs-small);
                }

                strong {
                    display: block;
                    margin-block-end: var(--space-3xs);
                }

                p {
                    font-size: var(--fs-small);
                }
            }

            .stats {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-xl);

                li {
                    display: flex;
                    gap: var(--space-xs);
                    font-size: var(--fs-small);
                }

                .stat-value {
                    font-weight: var(--fw-semibold);
                }
            }
        }

        .signin-card {
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            inline-size: 100%;
            max-inline-size: 360px;
            padding: var(--space-xl);
            border: var(--wire-border);
            border-radius: var(--wire-radius);
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);

            &::before {
                content: '';
                position: absolute;
                inset-block-start: 0;
                inset-inline: 0;
                block-size: 3px;
            }

            h2 {
                text-align: center;
                font-size: var(--fs-xl);
            }

            .subtitle {
                text-align: center;
                font-size: var(--fs-small);
            }

            .signin-form {
                display: flex;
                flex-direction: column;
                gap: var(--wire-gap);
            }

            .oauth-button {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: var(--space-sm);
                padding: var(--space-sm) var(--space-lg);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                cursor: pointer;
                text-decoration: none;
                font-weight: var(--fw-medium);
                transition: all 0.15s ease-out;

                svg {
                    flex-shrink: 0;
                }

                &:hover {
                    transform: translateY(-1px);
                }
            }

            .terms-text {
                text-align: center;
                font-size: var(--fs-small);
            }

            .divider {
                display: flex;
                align-items: center;
                gap: var(--wire-gap);
                font-size: var(--fs-small);

                &::before,
                &::after {
                    content: '';
                    flex: 1;
                    block-size: 1px;
                }
            }

            label {
                font-size: var(--fs-small);
            }

            input {
                padding: var(--space-sm);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
            }

            .submit-button {
                padding: var(--space-sm) var(--space-lg);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                cursor: pointer;
            }

            .signup-link {
                text-align: center;
                font-size: var(--fs-small);

                a {
                    font-weight: var(--fw-semibold);
                }
            }
        }
    }
}