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

@layer tokens
{
    :root
    {
        color-scheme: light;

        --font-sans: Arial, Helvetica, sans-serif;
        --font-mono: "Courier New", Courier, monospace;

        --color-bg: #f5f7fb;
        --color-surface: #ffffff;
        --color-surface-muted: #eef3ff;

        --color-text: #1c2434;
        --color-text-strong: #1f2a44;
        --color-text-soft: #52607a;

        --color-border: #d7ddea;
        --color-border-strong: #bfc8d8;
        --color-border-table: #e5e9f2;

        --color-primary: #2149d8;
        --color-primary-hover: #1a3cb6;

        --color-secondary: #2f3b52;
        --color-secondary-hover: #243046;

        --color-success-bg: #edf9ef;
        --color-success-border: #a6ddb0;

        --color-error-bg: #fff0f0;
        --color-error-border: #efb0b0;

        --shadow-card: 0 0.25rem 1rem rgba(18, 38, 63, 0.05);

        --radius-sm: 0.5rem;
        --radius-md: 0.75rem;

        --border-width: 0.0625rem;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;

        --container-max: 68.75rem;

        --control-height: 2.875rem;
        --textarea-min-height: 7.5rem;
    }
}

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

    html
    {
        font-size: 100%;
    }

    body
    {
        margin: 0;
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-sans);
        line-height: 1.5;
    }

    h1,
    h2,
    p,
    ul
    {
        margin-top: 0;
    }

    a
    {
        color: inherit;
    }

    img,
    canvas
    {
        display: block;
        max-width: 100%;
    }

    code,
    .mono
    {
        font-family: var(--font-mono);
        font-size: 0.92rem;
    }
}

@layer layout
{
    .page-shell
    {
        max-width: var(--container-max);
        margin-inline: auto;
        padding: var(--space-6);
    }

    .topbar,
    .nav-card,
    .card,
    .stat-card,
    .flash
    {
        background: var(--color-surface);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
    }

    .topbar
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-6);
        margin-bottom: var(--space-4);

        .topbar-actions
        {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            flex-wrap: wrap;
        }
    }

    .nav-card
    {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        padding: 0.875rem 1.125rem;
        margin-bottom: var(--space-4);
    }

    .card
    {
        padding: var(--space-5);
        margin-bottom: var(--space-4);
    }

    .narrow-card
    {
        max-width: 36rem;
    }

    .stats-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
        gap: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .table-wrap
    {
        overflow-x: auto;
    }

    main > :last-child
    {
        margin-bottom: 0;
    }

    @media (max-width: 43.75rem)
    {
        .page-shell
        {
            padding: var(--space-4);
        }

        .topbar
        {
            flex-direction: column;
            align-items: flex-start;

            .topbar-actions
            {
                width: 100%;
                justify-content: space-between;
            }
        }
    }
}

@layer components
{
    .topbar
    {
        h1
        {
            margin-bottom: 0;
        }
    }

    .card
    {
        h2
        {
            margin-bottom: 0;
        }
    }

    .eyebrow
    {
        margin-bottom: 0.375rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-soft);
        font-size: 0.8rem;
    }

    .welcome
    {
        color: var(--color-text-soft);
    }

    .button
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding: 0.625rem 0.875rem;
        border: none;
        border-radius: var(--radius-sm);
        background: var(--color-primary);
        color: #ffffff;
        text-decoration: none;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        transition:
            background-color 160ms ease,
            transform 160ms ease;

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

    .button-secondary
    {
        background: var(--color-secondary);

        &:hover
        {
            background: var(--color-secondary-hover);
        }
    }

    .nav-card
    {
        a
        {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.5rem;
            padding: 0.625rem 0.875rem;
            border: none;
            border-radius: var(--radius-sm);
            background: var(--color-primary);
            color: #ffffff;
            text-decoration: none;
            font: inherit;
            font-weight: 600;
            cursor: pointer;
            transition:
                background-color 160ms ease,
                transform 160ms ease;

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

            &.button-secondary
            {
                background: var(--color-secondary);

                &:hover
                {
                    background: var(--color-secondary-hover);
                }
            }
        }
    }

    .flash
    {
        padding: 0.875rem 1rem;
        margin-bottom: var(--space-4);

        &.flash-success
        {
            background: var(--color-success-bg);
            border-color: var(--color-success-border);
        }

        &.flash-error
        {
            background: var(--color-error-bg);
            border-color: var(--color-error-border);
        }
    }

    .stat-card
    {
        padding: var(--space-5);

        span
        {
            display: block;
            margin-bottom: 0.625rem;
            color: var(--color-text-soft);
        }

        strong
        {
            font-size: 2rem;
            line-height: 1.1;
        }
    }

    .stack-form
    {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);

        label
        {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            font-weight: 600;
            color: var(--color-text-strong);
        }

        & :where(input[type="text"], input[type="password"], select, textarea)
        {
            width: 100%;
            margin: 0;
            padding: 0.75rem 0.875rem;
            border: var(--border-width) solid var(--color-border-strong);
            border-radius: var(--radius-sm);
            background: var(--color-surface);
            color: var(--color-text-strong);
            font: inherit;
        }

        & :where(input[type="text"], input[type="password"], select)
        {
            min-height: var(--control-height);
        }

        textarea
        {
            min-height: var(--textarea-min-height);
            resize: vertical;
            line-height: 1.45;
        }

        select
        {
            appearance: auto;
        }
    }

    .checkbox-row
    {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 0.65rem;
        font-weight: 600;
        color: var(--color-text-strong);

        input[type="checkbox"]
        {
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            margin: 0;
        }

        span
        {
            line-height: 1.2;
        }
    }

    table
    {
        width: 100%;
        border-collapse: collapse;

        th,
        td
        {
            padding: 0.625rem 0.75rem;
            border-bottom: var(--border-width) solid var(--color-border-table);
            text-align: left;
            vertical-align: top;
        }

        th
        {
            background: var(--color-bg);
        }
    }

    pre
    {
        margin: 0;
        padding: var(--space-4);
        overflow-x: auto;
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-bg);
        font: inherit;
        white-space: pre-wrap;
        word-break: break-word;
    }

    ul
    {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }

    .section-fieldset
    {
        margin: 0;
        padding: var(--space-4);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-sm);

        legend
        {
            padding: 0 var(--space-2);
            font-weight: 600;
            color: var(--color-text-strong);
        }

        .fieldset-help
        {
            margin-bottom: var(--space-3);
            color: var(--color-text-soft);
            font-size: 0.95rem;
        }

        .checkbox-group
        {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: var(--space-3);
        }
    }
}

@layer utilities
{
    .visually-hidden
    {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        padding: 0;
        margin: -0.0625rem;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}