@layer tokens, base, layout, components, motion;

@layer tokens {
    :root {
        color-scheme: light;
        font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

        --color-text: #dbe4ff;
        --color-text-muted: #a6b0d7;
        --color-heading: #f7f8ff;
        --color-accent: #7c9eff;
        --color-accent-strong: #5f6dff;
        --color-accent-cyan: #46d5ff;
        --color-accent-success: #23c68a;
        --color-danger: #ff6a7d;
        --color-bg: #050816;
        --color-bg-soft: #0a1030;
        --color-bg-deep: #121740;
        --color-surface: #0d1738;
        --color-surface-soft: #121f4d;
        --color-surface-strong: #1a2758;
        --color-border: #2a3d7f;
        --color-border-strong: #4f68c9;
        --color-accent-mid: #4258ff;
        --color-button-text: #f7f8ff;

        --color-logo-outline: rgb(from var(--color-accent) r g b / 35%);
        --color-logo-surface: rgb(from var(--color-bg-soft) r g b / 85%);
        --color-shell-glow: rgb(from var(--color-accent-cyan) r g b / 24%);
        --color-hero-glow: rgb(from var(--color-accent-strong) r g b / 35%);
        --color-button-glow: rgb(from var(--color-accent-cyan) r g b / 30%);

        --space-3xs: 0.2rem;
        --space-2xs: 0.35rem;
        --space-xs: 0.5rem;
        --space-sm: 0.75rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;

        --radius-sm: 0.65rem;
        --radius-md: 1rem;
        --radius-lg: 1.2rem;
        --radius-pill: 999rem;

        --size-border: 1px;
        --size-border-strong: 2px;
        --size-shadow-sm: 0 8px 20px;
        --size-shadow-lg: 0 20px 45px;

        --font-size-2xs: 0.72rem;
        --font-size-xs: 0.83rem;
        --font-size-sm: 0.95rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.22rem;
        --font-size-xl: clamp(1.9rem, 8vw, 2.8rem);

        --shell-max-width: 72rem;
        --field-logo-width: min(20rem, 42%);
        --field-logo-min-height: 7.5rem;

        --logo-1-top: 0.375rem;
        --logo-1-end: 18%;
        --logo-2-top: 2.25rem;
        --logo-2-end: 0%;
        --logo-3-top: 4.25rem;
        --logo-3-end: 30%;
        --logo-4-top: 0.75rem;
        --logo-4-end: 54%;
        --logo-5-top: 5.375rem;
        --logo-5-end: 60%;
        --logo-6-top: 2.375rem;
        --logo-6-end: 72%;
        --logo-7-top: 6rem;
        --logo-7-end: 6%;
    }
}

@layer base {
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        color: var(--color-text);
        background:
            radial-gradient(circle at 12% 18%, var(--color-shell-glow) 0%, transparent 38%),
            radial-gradient(circle at 88% 0%, var(--color-hero-glow) 0%, transparent 34%),
            linear-gradient(170deg, var(--color-bg) 0%, var(--color-bg-soft) 52%, var(--color-bg-deep) 100%);
        min-block-size: 100dvh;
    }

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

    h1,
    h2,
    h3 {
        color: var(--color-heading);
        margin-block: 0;
    }

    p {
        margin-block: 0;
        color: var(--color-text-muted);
        line-height: 1.6;
    }

    input,
    textarea {
        inline-size: 100%;
        padding-block: var(--space-sm);
        padding-inline: var(--space-sm);
        border: var(--size-border) solid var(--color-border);
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: var(--font-size-md);
        color: var(--color-heading);
        background: var(--color-surface-soft);
    }

    input:focus-visible,
    textarea:focus-visible,
    button:focus-visible,
    .button:focus-visible,
    a:focus-visible {
        outline: var(--size-border-strong) solid var(--color-accent-cyan);
        outline-offset: var(--space-3xs);
    }
}

@layer layout {
    .shell {
        min-block-size: 100dvh;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .shell-header,
    .shell-content {
        inline-size: min(100% - (var(--space-md) * 2), var(--shell-max-width));
        margin-inline: auto;
    }

    .shell-header {
        padding-block: var(--space-md);
        padding-inline: var(--space-sm);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-sm);
    }

    .shell-content {
        padding-inline: var(--space-sm);
        padding-block-end: var(--space-xl);
        display: grid;
        gap: var(--space-md);
    }

    .shell-header nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        font-weight: 600;
    }

    .summary-grid {
        display: grid;
        gap: var(--space-sm);
        grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    }

    @media (min-width: 48rem) {
        .shell-header {
            padding-block: var(--space-lg) var(--space-md);
            padding-inline: var(--space-md);
        }

        .shell-content {
            padding-inline: var(--space-md);
            gap: var(--space-lg);
        }

        .profile-header {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: var(--space-lg);
            align-items: start;
        }
    }
}

@layer components {
    .brand {
        font-weight: 800;
        letter-spacing: 0.02em;
        color: var(--color-heading);
        text-shadow: 0 0 16px var(--color-shell-glow);
    }

    .shell-header nav a {
        padding-block: var(--space-2xs);
        padding-inline: var(--space-sm);
        border-radius: var(--radius-pill);
        color: var(--color-text-muted);
        transition: color 0.25s ease, background-color 0.25s ease;
    }

    .shell-header nav a:hover {
        color: var(--color-heading);
        background: rgb(from var(--color-surface-soft) r g b / 70%);
    }

    .hero,
    .panel,
    .profile-header {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        border: var(--size-border) solid var(--color-border);
        border-radius: var(--radius-lg);
        background: linear-gradient(145deg, rgb(from var(--color-surface) r g b / 94%) 0%, rgb(from var(--color-surface-soft) r g b / 90%) 100%);
        box-shadow: var(--size-shadow-lg) rgb(from var(--color-bg) r g b / 42%);
        padding-block: var(--space-lg);
        padding-inline: var(--space-md);
    }

    .hero::after,
    .panel::after,
    .profile-header::after {
        content: "";
        position: absolute;
        inset-block-end: -6rem;
        inset-inline: -20%;
        block-size: 11.75rem;
        background: linear-gradient(90deg, rgb(from var(--color-accent-strong) r g b / 30%), rgb(from var(--color-accent-cyan) r g b / 30%));
        filter: blur(28px);
        z-index: -1;
    }

    .hero h1 {
        margin-block-start: var(--space-xs);
        margin-block-end: var(--space-sm);
        max-inline-size: 18ch;
        font-size: var(--font-size-xl);
        line-height: 1.08;
    }

    .eyebrow {
        font-size: var(--font-size-xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-accent-cyan);
        margin-block-end: var(--space-3xs);
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        margin-block-start: var(--space-md);
    }

    .button,
    button {
        cursor: pointer;
        border: var(--size-border) solid var(--color-border-strong);
        border-radius: var(--radius-pill);
        background: linear-gradient(120deg, var(--color-accent-strong), var(--color-accent-mid));
        color: var(--color-button-text);
        font-weight: 600;
        font-size: var(--font-size-sm);
        padding-block: var(--space-xs);
        padding-inline: var(--space-md);
        box-shadow: var(--size-shadow-sm) var(--color-button-glow);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .button:hover,
    button:hover {
        transform: translateY(-0.125rem);
        box-shadow: var(--size-shadow-sm) rgb(from var(--color-accent-cyan) r g b / 40%);
        border-color: var(--color-accent-cyan);
    }

    .button-secondary {
        background: linear-gradient(120deg, var(--color-surface-soft), var(--color-surface-strong));
        color: var(--color-heading);
        border-color: var(--color-border);
    }

    .chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .chip,
    .chip-button {
        border: var(--size-border) solid var(--color-border);
        border-radius: var(--radius-pill);
        background: rgb(from var(--color-surface-soft) r g b / 72%);
        color: var(--color-text);
        padding-block: var(--space-2xs);
        padding-inline: var(--space-sm);
        font-size: var(--font-size-sm);
    }

    .chip-button.selected {
        border-color: var(--color-accent-cyan);
        background: linear-gradient(120deg, rgb(from var(--color-accent-strong) r g b / 75%), rgb(from var(--color-accent-cyan) r g b / 75%));
        color: var(--color-heading);
    }

    .form-grid {
        margin-block-start: var(--space-md);
        display: grid;
        gap: var(--space-sm);
    }

    .form-grid label {
        display: block;
        font-weight: 600;
        margin-block-end: var(--space-2xs);
    }

    .summary-grid article {
        border: var(--size-border) solid var(--color-border);
        border-radius: var(--radius-md);
        padding-block: var(--space-sm);
        padding-inline: var(--space-sm);
        background: rgb(from var(--color-surface-soft) r g b / 68%);
    }

    .summary-grid h3 {
        font-size: clamp(1.4rem, 6vw, 1.9rem);
        margin-block-end: var(--space-3xs);
    }

    .account-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: var(--space-xs);
    }

    .account-list li {
        border: var(--size-border) solid var(--color-border);
        border-radius: var(--radius-md);
        background: rgb(from var(--color-surface-soft) r g b / 65%);
        padding-block: var(--space-sm);
        padding-inline: var(--space-sm);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    table {
        inline-size: 100%;
        border-collapse: collapse;
        font-size: var(--font-size-sm);
    }

    th,
    td {
        border-block-end: var(--size-border) solid var(--color-border);
        padding-block: var(--space-xs);
        padding-inline: var(--space-xs);
        text-align: start;
        vertical-align: top;
    }

    th {
        color: var(--color-heading);
        font-weight: 700;
    }

    .readme-preview {
        margin-block-start: var(--space-md);
        border: var(--size-border) solid var(--color-border);
        border-radius: var(--radius-md);
        background: rgb(from var(--color-surface-soft) r g b / 65%);
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
    }

    .floating-logo-field {
        position: absolute;
        inset-block-start: var(--space-2xs);
        inset-inline-start: 5%;
        inset-inline-end: auto;
        inline-size: 90%;
        min-block-size: var(--field-logo-min-height);
        pointer-events: none;
    }

    .floating-logo {
        position: absolute;
        border: var(--size-border) solid var(--color-logo-outline);
        border-radius: var(--radius-pill);
        padding-block: var(--space-3xs);
        padding-inline: var(--space-xs);
        background: var(--color-logo-surface);
        font-size: var(--font-size-2xs);
        font-weight: 700;
        animation: float-logo 6.5s ease-in-out infinite;
        animation-delay: var(--float-delay);
        box-shadow: var(--size-shadow-sm) rgb(from var(--color-bg) r g b / 20%);
        color: var(--color-heading);
    }

    .floating-logo:nth-child(1) {
        inset-block-start: var(--logo-1-top);
        inset-inline-end: var(--logo-1-end);
    }

    .floating-logo:nth-child(2) {
        inset-block-start: var(--logo-2-top);
        inset-inline-end: var(--logo-2-end);
    }

    .floating-logo:nth-child(3) {
        inset-block-start: var(--logo-3-top);
        inset-inline-end: var(--logo-3-end);
    }

    .floating-logo:nth-child(4) {
        inset-block-start: var(--logo-4-top);
        inset-inline-end: var(--logo-4-end);
    }

    .floating-logo:nth-child(5) {
        inset-block-start: var(--logo-5-top);
        inset-inline-end: var(--logo-5-end);
    }

    .floating-logo:nth-child(6) {
        inset-block-start: var(--logo-6-top);
        inset-inline-end: var(--logo-6-end);
    }

    .floating-logo:nth-child(7) {
        inset-block-start: var(--logo-7-top);
        inset-inline-end: var(--logo-7-end);
    }

    .automation-note {
        margin-block-start: var(--space-sm);
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    .error-message {
        margin-block-start: var(--space-sm);
        color: var(--color-danger);
        font-weight: 600;
    }

    @media (min-width: 47.5rem) {
        .account-list li {
            grid-template-columns: 1fr auto auto;
            align-items: center;
            gap: var(--space-sm);
        }

        .floating-logo-field {
            inset-block-start: var(--space-xs);
            inset-inline-start: auto;
            inset-inline-end: var(--space-sm);
            inline-size: var(--field-logo-width);
        }
    }

    #blazor-error-ui {
        display: none;
    }
}

@layer motion {
    @keyframes float-logo {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-0.5rem);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}