@layer base, theme, components, utilities;

@layer theme {
    :root {
        --bg-canvas-light: #f6f7fb;
        --bg-canvas-dark: #0d0f14;

        --bg-surface-light: #ffffff;
        --bg-surface-dark: #161922;

        --bg-subtle-light: #f0f2f8;
        --bg-subtle-dark: #1e2230;

        --text-primary-light: #111827;
        --text-primary-dark: #f3f4f6;

        --text-secondary-light: #4b5563;
        --text-secondary-dark: #9ca3af;

        --border-default-light: #cbd5e1;
        --border-default-dark: #2e3446;

        --brand-primary-light: #d946ef;
        --brand-primary-dark: #e879f9;

        --brand-hover-light: #c026d3;
        --brand-hover-dark: #f0abfc;

        --brand-text-light: #ffffff;
        --brand-text-dark: #1a0721;

        --focus-ring-light: #9333ea;
        --focus-ring-dark: #d8b4fe;

        --error-fg-light: #b91c1c;
        --error-fg-dark: #fca5a5;

        --error-bg-light: #fef2f2;
        --error-bg-dark: #3b1219;

        --success-border-light: #15803d;
        --success-border-dark: #4ade80;

        --success-bg-light: #ecfdf5;
        --success-bg-dark: #0f291e;

        --success-fg-light: #166534;
        --success-fg-dark: #86efac;

        /* Default light fallback */
        --bg-canvas: var(--bg-canvas-light);
        --bg-surface: var(--bg-surface-light);
        --bg-subtle: var(--bg-subtle-light);
        --text-primary: var(--text-primary-light);
        --text-secondary: var(--text-secondary-light);
        --border-default: var(--border-default-light);
        --color-accent: var(--brand-primary-light);
        --color-accent-hover: var(--brand-hover-light);
        --color-accent-text: var(--brand-text-light);
        --color-focus: var(--focus-ring-light);
        --color-error-fg: var(--error-fg-light);
        --color-error-bg: var(--error-bg-light);
        --color-success-border: var(--success-border-light);
        --color-success-bg: var(--success-bg-light);
        --color-success-fg: var(--success-fg-light);

        @media (prefers-color-scheme: dark) {
            --bg-canvas: var(--bg-canvas-dark);
            --bg-surface: var(--bg-surface-dark);
            --bg-subtle: var(--bg-subtle-dark);
            --text-primary: var(--text-primary-dark);
            --text-secondary: var(--text-secondary-dark);
            --border-default: var(--border-default-dark);
            --color-accent: var(--brand-primary-dark);
            --color-accent-hover: var(--brand-hover-dark);
            --color-accent-text: var(--brand-text-dark);
            --color-focus: var(--focus-ring-dark);
            --color-error-fg: var(--error-fg-dark);
            --color-error-bg: var(--error-bg-dark);
            --color-success-border: var(--success-border-dark);
            --color-success-bg: var(--success-bg-dark);
            --color-success-fg: var(--success-fg-dark);
        }

        @supports (color: light-dark(white, black)) {
            --bg-canvas: light-dark(var(--bg-canvas-light), var(--bg-canvas-dark));
            --bg-surface: light-dark(var(--bg-surface-light), var(--bg-surface-dark));
            --bg-subtle: light-dark(var(--bg-subtle-light), var(--bg-subtle-dark));
            --text-primary: light-dark(var(--text-primary-light), var(--text-primary-dark));
            --text-secondary: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
            --border-default: light-dark(var(--border-default-light), var(--border-default-dark));
            --color-accent: light-dark(var(--brand-primary-light), var(--brand-primary-dark));
            --color-accent-hover: light-dark(var(--brand-hover-light), var(--brand-hover-dark));
            --color-accent-text: light-dark(var(--brand-text-light), var(--brand-text-dark));
            --color-focus: light-dark(var(--focus-ring-light), var(--focus-ring-dark));
            --color-error-fg: light-dark(var(--error-fg-light), var(--error-fg-dark));
            --color-error-bg: light-dark(var(--error-bg-light), var(--error-bg-dark));
            --color-success-border: light-dark(var(--success-border-light), var(--success-border-dark));
            --color-success-bg: light-dark(var(--success-bg-light), var(--success-bg-dark));
            --color-success-fg: light-dark(var(--success-fg-light), var(--success-fg-dark));
        }

        color-scheme: light dark;
        accent-color: var(--color-accent);
        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
}

@layer base {
    html, body, main, footer, section, article, form, div, input, button, img, audio, h1, h2, p, span {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        min-block-size: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: var(--font-sans);
        line-height: 1.5;
        background-color: var(--bg-canvas);
        color: var(--text-primary);
    }

    :where(input, button, audio):focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
    }
}

@layer components {
    .page-shell {
        inline-size: 100%;
        max-inline-size: 36rem;
        margin-inline: auto;
        padding-inline: 1.25rem;
        padding-block: 3rem 2rem;
    }

    .downloader-card {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: 1.25rem;
        padding-block: 2rem;
        padding-inline: 1.75rem;
        box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.14);
    }

    .card-header {
        margin-block-end: 1.75rem;
    }

    .brand-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 3rem;
        block-size: 3rem;
        border-radius: 0.875rem;
        background-color: var(--bg-subtle);
        color: var(--color-accent);
        margin-block-end: 1rem;
    }

    h1 {
        margin-block: 0 0.5rem;
        font-size: 1.625rem;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .subtitle {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }

    .form-group {
        margin-block-end: 1.25rem;
    }

    label {
        display: inline-block;
        font-weight: 600;
        font-size: 0.95rem;
        padding-block: 0.5rem;
        margin-block: -0.5rem 0.15rem;
    }

    .hint {
        display: block;
        color: var(--text-secondary);
        font-size: 0.825rem;
        margin-block-end: 0.5rem;
        overflow-wrap: anywhere;
    }

    input[type="text"] {
        display: block;
        inline-size: 100%;
        min-block-size: 48px;
        padding-block: 0.75rem;
        padding-inline: 0.875rem;
        font-size: 1rem;
        font-family: inherit;
        color: var(--text-primary);
        background-color: var(--bg-subtle);
        border: 1.5px solid var(--border-default);
        border-radius: 0.75rem;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    @media (pointer: coarse) {
        input[type="text"],
        .primary-btn {
            min-block-size: 52px;
        }
    }

    input[type="text"]:where(:user-invalid, .user-invalid-fallback) {
        border-color: var(--color-error-fg);
        background-color: var(--color-error-bg);
    }

    input[type="text"]:where(:user-valid, .user-valid-fallback) {
        border-color: var(--color-success-border);
    }

    .error-msg {
        display: none;
        align-items: center;
        gap: 0.4rem;
        color: var(--color-error-fg);
        font-size: 0.875rem;
        font-weight: 500;
        margin-block-start: 0.45rem;
    }

    input[type="text"]:where(:user-invalid, .user-invalid-fallback) + .error-msg {
        display: flex;
    }

    .primary-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        inline-size: 100%;
        min-block-size: 48px;
        padding-block: 0.75rem;
        padding-inline: 1.25rem;
        font-size: 1rem;
        font-weight: 600;
        font-family: inherit;
        color: var(--color-accent-text);
        background-color: var(--color-accent);
        border: none;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: background-color 0.15s ease, opacity 0.15s ease;
    }

    .primary-btn:hover:not(:disabled) {
        background-color: var(--color-accent-hover);
    }

    .primary-btn:disabled {
        opacity: 0.65;
        cursor: wait;
    }

    .status-banner {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-block-start: 1.25rem;
        padding-block: 0.75rem;
        padding-inline: 1rem;
        border-radius: 0.75rem;
        font-size: 0.925rem;
        background-color: var(--bg-subtle);
        border: 1px solid var(--border-default);
    }

    .status-banner.is-error {
        background-color: var(--color-error-bg);
        border-color: var(--color-error-fg);
        color: var(--color-error-fg);
    }

    .status-banner.is-success {
        background-color: var(--color-success-bg);
        border-color: var(--color-success-border);
        color: var(--color-success-fg);
    }

    .song-preview {
        margin-block-start: 1.25rem;
        padding: 1rem;
        border-radius: 0.875rem;
        background-color: var(--bg-subtle);
        border: 1px solid var(--border-default);
    }

    .song-meta-row {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .song-cover {
        inline-size: 5.5rem;
        block-size: 5.5rem;
        border-radius: 0.625rem;
        object-fit: cover;
        flex-shrink: 0;
        background-color: var(--border-default);
    }

    .song-details {
        min-inline-size: 0;
        flex: 1;
    }

    .song-title {
        margin-block: 0 0.2rem;
        font-size: 1.05rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .song-artist {
        margin-block: 0 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .song-tags {
        margin: 0;
        font-size: 0.8rem;
        color: var(--text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .song-player {
        inline-size: 100%;
        margin-block-start: 0.875rem;
    }

    .page-footer {
        text-align: center;
        padding-block: 1.25rem;
        padding-inline: 1rem;
        font-size: 0.825rem;
        color: var(--text-secondary);
    }

    .page-footer p {
        margin: 0;
    }
}

@layer utilities {
    .is-hidden {
        display: none;
    }
}