@layer tokens, base, components, utilities;

@layer tokens {
    :root {
        --sdp-burgundy: #3a0c10;
        --sdp-red: #ed1c24;
        --sdp-red-deep: #c81018;
        --sdp-gold: #f5c518;
        --sdp-ink: #140608;
        --sdp-text: #f6f2ef;
        --sdp-text-secondary: rgba(246, 242, 239, 0.72);
        --sdp-text-muted: rgba(246, 242, 239, 0.5);
        --sdp-line: rgba(255, 255, 255, 0.1);
        --sdp-surface: rgba(36, 8, 12, 0.62);
        --sdp-field: rgba(8, 2, 3, 0.35);
        --sdp-blur: 12px;
        --sdp-radius: 8px;
        --sdp-radius-sm: 4px;
        --sdp-control-h: 2.375rem;
        --sdp-max: 28.5rem;
        --sdp-font: "Inter", "Segoe UI", system-ui, sans-serif;
    }
}

@layer base {
    html {
        color-scheme: dark;
    }

    .sdp-app {
        min-block-size: 100vh;
        margin: 0;
        color: var(--sdp-text);
        font-family: var(--sdp-font);
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.45;
        background: var(--sdp-ink);
    }

    .sdp-app :where(a, button, input, label, select, textarea) {
        font: inherit;
    }

    .sdp-skip {
        position: absolute;
        inset-inline-start: 1rem;
        inset-block-start: -3rem;
        z-index: 20;
        padding: 0.4rem 0.65rem;
        border-radius: var(--sdp-radius-sm);
        background: #fff;
        color: #111;
        text-decoration: none;
    }

    .sdp-skip:focus {
        inset-block-start: 1rem;
    }

    .sdp-atmosphere {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .sdp-atmosphere__art {
        position: absolute;
        inset: 0;
        background-color: var(--sdp-burgundy);
        background-image: var(--sdp-art);
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .sdp-atmosphere__shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(12, 3, 5, 0.08) 0%,
            rgba(12, 3, 5, 0.28) 70%,
            rgba(12, 3, 5, 0.46) 100%
        );
    }

    .sdp-page {
        position: relative;
        z-index: 1;
        inline-size: min(100%, calc(var(--sdp-max) + 2.5rem));
        margin-inline: auto;
        padding: 1.75rem 1.15rem 2.5rem;
    }
}

@layer components {
    .sdp-brand {
        display: flex;
        justify-content: center;
        margin-block-end: 1.15rem;
    }

    .sdp-logo {
        display: block;
        inline-size: min(100%, 9.25rem);
        block-size: auto;
    }

    .sdp-masthead {
        max-inline-size: var(--sdp-max);
        margin: 0 auto 1.15rem;
        text-align: center;
    }

    .sdp-masthead__title {
        margin: 0 0 0.35rem;
        font-size: 1.375rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.25;
        text-wrap: balance;
    }

    .sdp-masthead__lede {
        margin: 0;
        color: var(--sdp-text-secondary);
        font-size: 0.875rem;
        text-wrap: pretty;
    }

    .sdp-facts {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 1.25rem;
        margin: 0.85rem 0 0;
    }

    .sdp-facts__item {
        display: grid;
        gap: 0.1rem;
        text-align: start;
    }

    .sdp-facts__label {
        color: var(--sdp-text-muted);
        font-size: 0.6875rem;
        font-weight: 500;
    }

    .sdp-facts__value {
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .sdp-surface {
        max-inline-size: var(--sdp-max);
        margin-inline: auto;
        padding: 1.15rem 1.15rem 1.25rem;
        border: 1px solid var(--sdp-line);
        border-radius: var(--sdp-radius);
        background: var(--sdp-surface);
        box-shadow: 0 8px 24px rgba(8, 2, 3, 0.22);
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .sdp-surface {
            backdrop-filter: blur(var(--sdp-blur));
            -webkit-backdrop-filter: blur(var(--sdp-blur));
        }
    }

    .sdp-panel__title {
        margin: 0 0 0.2rem;
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .sdp-panel__copy {
        margin: 0 0 1rem;
        color: var(--sdp-text-secondary);
        font-size: 0.8125rem;
    }

    .sdp-field {
        display: grid;
        gap: 0.28rem;
        margin-block-end: 0.7rem;
    }

    .sdp-field:last-of-type {
        margin-block-end: 0;
    }

    .sdp-label {
        color: var(--sdp-text);
        font-size: 0.75rem;
        font-weight: 500;
    }

    .sdp-hint {
        color: var(--sdp-text-muted);
        font-size: 0.75rem;
    }

    .sdp-input {
        box-sizing: border-box;
        min-block-size: var(--sdp-control-h);
        inline-size: 100%;
        padding: 0.4rem 0.65rem;
        border: 1px solid var(--sdp-line);
        border-radius: var(--sdp-radius-sm);
        background: var(--sdp-field);
        color: var(--sdp-text);
        outline: none;
    }

    .sdp-input::placeholder {
        color: rgba(246, 242, 239, 0.35);
    }

    .sdp-input:hover {
        border-color: rgba(255, 255, 255, 0.18);
    }

    .sdp-input:focus-visible {
        border-color: color-mix(in srgb, var(--sdp-gold) 55%, white);
        outline: 2px solid color-mix(in srgb, var(--sdp-gold) 45%, transparent);
        outline-offset: 1px;
    }

    .sdp-input.is-invalid {
        border-color: color-mix(in srgb, var(--sdp-red) 70%, white);
    }

    .sdp-actions {
        display: grid;
        gap: 0.5rem;
        margin-block-start: 1rem;
    }

    .sdp-login-prompt {
        margin: 0;
        color: var(--sdp-text-muted);
        font-size: 0.8125rem;
        text-align: center;
    }

    .sdp-login-prompt a {
        color: var(--sdp-text);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

    .sdp-login-prompt a:hover {
        color: #fff;
    }

    .sdp-login-prompt a:focus-visible {
        outline: 2px solid var(--sdp-gold);
        outline-offset: 2px;
    }

    .sdp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-block-size: 2.5rem;
        padding: 0.45rem 0.9rem;
        border: 1px solid transparent;
        border-radius: var(--sdp-radius-sm);
        color: #fff;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .sdp-btn:focus-visible {
        outline: 2px solid var(--sdp-gold);
        outline-offset: 2px;
    }

    .sdp-btn--primary {
        background: var(--sdp-red);
    }

    .sdp-btn--primary:hover:not(:disabled) {
        background: var(--sdp-red-deep);
    }

    .sdp-btn--ghost {
        border-color: var(--sdp-line);
        background: transparent;
        color: var(--sdp-text);
        font-weight: 500;
    }

    .sdp-btn--ghost:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.06);
    }

    .sdp-alert {
        margin-block-end: 0.85rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid color-mix(in srgb, var(--sdp-red) 40%, white);
        border-radius: var(--sdp-radius-sm);
        background: rgba(237, 28, 36, 0.16);
        color: var(--sdp-text);
        font-size: 0.8125rem;
    }

    .sdp-alert ul {
        margin: 0;
        padding-inline-start: 1rem;
    }

    .sdp-resume {
        max-inline-size: var(--sdp-max);
        margin: 1.25rem auto 0;
        padding-block-start: 1.15rem;
        border-block-start: 1px solid var(--sdp-line);
    }

    .sdp-home {
        text-align: center;
    }

    .sdp-home .sdp-qr-frame {
        margin-inline: auto;
    }

    .sdp-home-hero {
        display: grid;
        justify-items: center;
        gap: 0.3rem;
        text-align: center;
    }

    .sdp-home-hero :is(h1, h2) {
        margin: 0.7rem 0 0;
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: -0.015em;
    }

    .sdp-home-hero p {
        margin: 0;
        color: var(--sdp-text-secondary);
        font-size: 0.8125rem;
    }

    .sdp-qr-frame {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 0.75rem;
        border-radius: var(--sdp-radius-sm);
        color-scheme: light;
        forced-color-adjust: none;
    }

    .sdp-qr-frame :is(canvas, img, table) {
        background-color: #ffffff !important;
    }

    .sdp-empty {
        margin: 0;
        color: var(--sdp-text-secondary);
        text-align: center;
        font-size: 0.875rem;
    }

    .sdp-guest-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        max-inline-size: var(--sdp-max);
        margin: 0 auto 1rem;
    }

    .sdp-guest-head .sdp-btn {
        min-inline-size: 4.5rem;
    }

    .sdp-block + .sdp-block {
        margin-block-start: 1.1rem;
        padding-block-start: 1.1rem;
        border-block-start: 1px solid var(--sdp-line);
    }

    .sdp-actions--full {
        inline-size: 100%;
    }

    .sdp-masthead--flush {
        margin-block-end: 0;
        text-align: start;
    }
}

@layer utilities {
    @media (pointer: coarse) {
        .sdp-input,
        .sdp-btn {
            min-block-size: 2.75rem;
        }
    }

    @media (max-width: 480px) {
        .sdp-page {
            padding: 1.15rem 0.9rem 1.75rem;
        }

        .sdp-surface {
            padding: 1rem 0.9rem 1.1rem;
        }

        .sdp-masthead__title {
            font-size: 1.25rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .sdp-app *,
        .sdp-app *::before,
        .sdp-app *::after {
            transition: none !important;
            animation: none !important;
        }
    }

    @media (forced-colors: active) {
        .sdp-surface,
        .sdp-input,
        .sdp-btn {
            border: 1px solid CanvasText;
            background: Canvas;
            color: CanvasText;
            backdrop-filter: none;
            box-shadow: none;
        }

        .sdp-btn--primary {
            outline: 2px solid Highlight;
        }
    }
}