/* ============================================================
   BLOOD BOWL LEAGUE MANAGER
   Global design system
   Mobile first
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    /* ========================================================
       COLORS
       ======================================================== */

    /* Page */
    --color-background: #f1f0ec;
    --color-background-deep: #e6e4df;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-secondary: #f6f5f2;
    --color-surface-strong: #ebe9e4;

    /* Text */
    --color-text: #202225;
    --color-text-muted: #65686d;
    --color-text-soft: #85888d;

    /* Borders */
    --color-border: #d8d6d1;
    --color-border-strong: #b9b6af;

    /* Structural dark */
    --color-header: #191b1e;
    --color-header-secondary: #25282c;

    /* Blood Bowl red */
    --color-primary: #9d261f;
    --color-primary-hover: #7f1e19;
    --color-primary-active: #681813;
    --color-primary-soft: #f6e7e5;

    /* Secondary sporting accent */
    --color-accent: #9a6a28;
    --color-accent-hover: #7d551f;
    --color-accent-soft: #f4ead9;

    /* Semantic */
    --color-success: #39704a;
    --color-success-soft: #e8f2eb;

    --color-warning: #8a6118;
    --color-warning-soft: #f7eedc;

    --color-danger: #a32b25;
    --color-danger-soft: #f7e7e5;

    --color-info: #3f6478;
    --color-info-soft: #e7f0f4;

    --color-white: #ffffff;


    /* ========================================================
       TYPOGRAPHY
       ======================================================== */

    --font-family:
            Inter,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif;

    --font-family-heading:
            "Arial Narrow",
            "Roboto Condensed",
            Inter,
            "Segoe UI",
            sans-serif;


    /* ========================================================
       LAYOUT
       ======================================================== */

    --content-width: 1200px;
    --page-gutter: 0.75rem;


    /* ========================================================
       SPACING
       ======================================================== */

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


    /* ========================================================
       RADIUS
       ======================================================== */

    --radius-sm: 0.3rem;
    --radius-md: 0.45rem;
    --radius-lg: 0.65rem;


    /* ========================================================
       SHADOWS
       ======================================================== */

    --shadow-sm:
            0 1px 2px rgb(20 22 24 / 0.06),
            0 2px 5px rgb(20 22 24 / 0.04);

    --shadow-md:
            0 3px 8px rgb(20 22 24 / 0.08),
            0 8px 20px rgb(20 22 24 / 0.05);


    /* ========================================================
       INTERACTION
       ======================================================== */

    --focus-ring:
            0 0 0 3px rgb(157 38 31 / 0.22);

    --touch-target: 44px;
}


/* ============================================================
   RESET
   ============================================================ */

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

html {
    min-height: 100%;

    font-family: var(--font-family);

    color: var(--color-text);
    background: var(--color-background);

    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    display: flex;
    flex-direction: column;

    background:
            linear-gradient(
                    180deg,
                    var(--color-background) 0,
                    #f7f6f3 22rem,
                    var(--color-background) 45rem
            );

    color: var(--color-text);

    font-size: 1rem;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

img,
svg {
    display: block;

    max-width: 100%;
}

form {
    margin: 0;
}

p {
    margin-block: 0 1rem;
}


/* ============================================================
   LINKS
   ============================================================ */

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

    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

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

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


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline: none;

    box-shadow: var(--focus-ring);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4 {
    margin-block: 0;

    color: var(--color-text);

    font-family: var(--font-family-heading);
    font-weight: 850;
    line-height: 1.05;

    text-wrap: balance;
}

h1 {
    font-size: clamp(1.9rem, 8vw, 3rem);
    letter-spacing: -0.045em;
}

h2 {
    font-size: clamp(1.35rem, 6vw, 1.85rem);
    letter-spacing: -0.035em;
}

h3 {
    font-size: 1.1rem;
    letter-spacing: -0.015em;
}

small,
.text-muted {
    color: var(--color-text-muted);
}


/* ============================================================
   GLOBAL PAGE LAYOUT
   ============================================================ */

.site-main {
    flex: 1 0 auto;

    width: 100%;

    padding-block:
            var(--space-5)
            var(--space-7);
}

.page-container {
    width: 100%;
    max-width: var(--content-width);

    margin-inline: auto;

    padding-inline: var(--page-gutter);
}


/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
    position: relative;
    z-index: 20;

    border-bottom: 4px solid var(--color-primary);

    background:
            linear-gradient(
                    135deg,
                    var(--color-header) 0%,
                    var(--color-header-secondary) 100%
            );

    color: #f5f5f3;

    box-shadow: var(--shadow-md);
}

.site-navigation {
    display: grid;
    gap: var(--space-3);

    width: 100%;
    max-width: var(--content-width);

    margin-inline: auto;

    padding:
            var(--space-3)
            var(--page-gutter);
}

.site-navigation-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-3);
}


/* ============================================================
   BRAND
   ============================================================ */

.site-brand {
    display: inline-flex;
    flex-direction: column;

    color: var(--color-white);

    font-weight: 900;
    line-height: 1;

    text-decoration: none;
}

.site-brand:hover,
.site-brand:focus-visible {
    color: var(--color-white);

    text-decoration: none;
}

.site-brand-primary {
    font-family: var(--font-family-heading);

    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: 0.045em;

    text-transform: uppercase;
}

.site-brand-secondary {
    margin-top: 0.15rem;

    color: #aeb1b5;

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* ============================================================
   NAVIGATION LINKS
   ============================================================ */

.site-navigation-links {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-2);
}

.site-navigation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--touch-target);

    padding-inline: var(--space-3);

    border-radius: var(--radius-sm);

    color: #e8e9ea;

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
            background-color 120ms ease,
            color 120ms ease;
}

.site-navigation-link:hover,
.site-navigation-link:focus-visible {
    background: rgb(255 255 255 / 0.08);
    color: var(--color-white);

    text-decoration: none;
}


/* ============================================================
   NAVIGATION ACCOUNT
   ============================================================ */

.site-navigation-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-2);

    padding-top: var(--space-2);

    border-top: 1px solid rgb(255 255 255 / 0.12);
}

.current-user {
    overflow: hidden;

    color: #aeb1b5;

    font-size: 0.8rem;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--touch-target);

    padding:
            0
            var(--space-3);

    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: var(--radius-sm);

    background: transparent;
    color: #e8e9ea;

    font-size: 0.85rem;
    font-weight: 700;

    cursor: pointer;

    transition:
            background-color 120ms ease,
            border-color 120ms ease,
            color 120ms ease;
}

.navigation-button:hover,
.navigation-button:focus-visible {
    border-color: rgb(255 255 255 / 0.4);

    background: rgb(255 255 255 / 0.08);
    color: var(--color-white);
}


/* ============================================================
   FLASH MESSAGES
   ============================================================ */

.messages {
    display: grid;
    gap: var(--space-2);

    width: 100%;
    max-width: var(--content-width);

    margin:
            var(--space-3)
            auto
            0;

    padding-inline: var(--page-gutter);
}

.message {
    margin: 0;

    padding:
            var(--space-3)
            var(--space-4);

    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);

    background: var(--color-surface);

    box-shadow: var(--shadow-sm);

    font-size: 0.9rem;
}

.message-success {
    border-color: var(--color-success);

    background: var(--color-success-soft);
}

.message-warning {
    border-color: var(--color-warning);

    background: var(--color-warning-soft);
}

.message-error {
    border-color: var(--color-danger);

    background: var(--color-danger-soft);
}

.message-info {
    border-color: var(--color-info);

    background: var(--color-info-soft);
}


/* ============================================================
   COMMON CARDS
   ============================================================ */

.card {
    padding: var(--space-4);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    box-shadow: var(--shadow-sm);
}

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

.card-title {
    margin: 0;
}


/* ============================================================
   COMMON BUTTONS
   ============================================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-2);

    width: 100%;
    min-height: var(--touch-target);

    padding:
            0.7rem
            var(--space-4);

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-weight: 750;
    line-height: 1.1;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
            background-color 120ms ease,
            border-color 120ms ease,
            color 120ms ease,
            transform 80ms ease;
}

.button:hover {
    text-decoration: none;
}

.button:active {
    transform: translateY(1px);
}

.button:disabled,
.button[aria-disabled="true"] {
    border-color: var(--color-border);

    background: var(--color-surface-strong);
    color: var(--color-text-soft);

    opacity: 0.75;

    cursor: not-allowed;

    transform: none;
}

a.button[aria-disabled="true"] {
    pointer-events: none;
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.button-primary {
    border-color: var(--color-primary);

    background: var(--color-primary);
    color: var(--color-white);
}

.button-primary:hover,
.button-primary:focus-visible {
    border-color: var(--color-primary-hover);

    background: var(--color-primary-hover);
    color: var(--color-white);
}


/* ============================================================
   SECONDARY BUTTON
   ============================================================ */

.button-secondary {
    border-color: var(--color-border-strong);

    background: var(--color-surface);
    color: var(--color-text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    border-color: var(--color-border-strong);

    background: var(--color-surface-secondary);
    color: var(--color-text);
}


/* ============================================================
   DANGER BUTTON
   ============================================================ */

.button-danger {
    border-color: var(--color-danger);

    background: transparent;
    color: var(--color-danger);
}

.button-danger:hover,
.button-danger:focus-visible {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}


/* ============================================================
   SMALL BUTTON
   ============================================================ */

.button-small {
    min-height: var(--touch-target);

    padding:
            0.5rem
            0.75rem;

    font-size: 0.85rem;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-group {
    display: grid;

    gap: var(--space-2);
}

.form-group + .form-group {
    margin-top: var(--space-4);
}

label {
    color: var(--color-text);

    font-size: 0.9rem;
    font-weight: 750;
}

input,
select,
textarea {
    display: block;

    width: 100%;
    min-height: var(--touch-target);

    padding:
            0.65rem
            0.75rem;

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);

    background: var(--color-surface);
    color: var(--color-text);

    transition:
            border-color 120ms ease,
            box-shadow 120ms ease,
            background-color 120ms ease;
}

textarea {
    min-height: 8rem;

    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);

    outline: none;

    box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
    border-color: var(--color-border);

    background: var(--color-surface-secondary);
    color: var(--color-text-soft);

    cursor: not-allowed;
}


/* ============================================================
   CHECKBOXES / RADIOS
   ============================================================ */

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: 0;

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


/* ============================================================
   HELP / ERRORS
   ============================================================ */

.helptext {
    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.errorlist {
    margin:
            var(--space-2)
            0;

    padding-left: 1.25rem;

    color: var(--color-danger);

    font-size: 0.85rem;
    font-weight: 650;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;

    min-height: 1.6rem;

    padding:
            0.15rem
            0.5rem;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: var(--color-surface-secondary);
    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}

.badge-success {
    border-color: var(--color-success);

    background: var(--color-success-soft);
    color: var(--color-success);
}

.badge-warning {
    border-color: var(--color-warning);

    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.badge-danger {
    border-color: var(--color-danger);

    background: var(--color-danger-soft);
    color: var(--color-danger);
}


/* ============================================================
   GENERIC UTILITY CLASSES
   ============================================================ */

.stack {
    display: grid;

    gap: var(--space-4);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-2);
}

.actions {
    display: grid;

    gap: var(--space-2);
}

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   PAGE HEADERS
   ============================================================ */

.page-header {
    display: grid;

    gap: var(--space-2);

    margin-bottom: var(--space-5);
}

.page-header h1 {
    max-width: 18ch;
}

.page-eyebrow,
.section-eyebrow {
    margin: 0;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1.2;

    text-transform: uppercase;
}

.page-intro {
    max-width: 42rem;

    margin:
            var(--space-2)
            0
            0;

    color: var(--color-text-muted);

    font-size: 0.95rem;
}

.page-actions {
    display: grid;

    gap: var(--space-2);

    margin-top: var(--space-3);
}




/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-3);

    margin-bottom: var(--space-3);
}

.section-header > div {
    display: grid;

    gap: var(--space-1);
}


/* ============================================================
   HOME
   ============================================================ */

.home-page {
    display: grid;

    gap: var(--space-5);
}

.home-seasons {
    min-width: 0;
}


/* ============================================================
   SEASON LIST
   ============================================================ */

.season-list {
    display: grid;

    gap: var(--space-2);

    margin: 0;
    padding: 0;

    list-style: none;
}

.season-list-item {
    margin: 0;
}

.season-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    min-height: 68px;

    padding:
            var(--space-3)
            var(--space-4);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);
    color: var(--color-text);

    box-shadow: var(--shadow-sm);

    text-decoration: none;

    transition:
            background-color 120ms ease,
            border-color 120ms ease,
            box-shadow 120ms ease,
            transform 80ms ease;
}

.season-list-link:hover,
.season-list-link:focus-visible {
    border-color: var(--color-border-strong);

    background: var(--color-surface-secondary);
    color: var(--color-text);

    box-shadow: var(--shadow-md);

    text-decoration: none;
}

.season-list-link:active {
    transform: translateY(1px);
}

.season-list-content {
    display: grid;

    gap: var(--space-1);

    min-width: 0;
}

.season-list-name {
    color: var(--color-text);

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.season-list-league {
    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.season-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-2);

    margin-top: var(--space-1);
}

.season-list-arrow {
    flex: 0 0 auto;

    color: var(--color-primary);

    font-size: 1.25rem;
    font-weight: 800;
}


/* ============================================================
   EMPTY STATES
   ============================================================ */

.empty-state {
    padding:
            var(--space-5)
            var(--space-4);

    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);

    background: rgb(255 255 255 / 0.65);

    text-align: center;
}

.empty-state-title {
    margin: 0;

    color: var(--color-text);

    font-weight: 800;
}

.empty-state-text {
    max-width: 30rem;

    margin:
            var(--space-2)
            auto
            0;

    color: var(--color-text-muted);

    font-size: 0.9rem;
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb-wrapper {
    padding-top: var(--space-5);
}

.breadcrumb-wrapper + .site-main {
    padding-top: var(--space-3);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-2);

    min-height: 2.5rem;

    color: var(--color-text-muted);

    font-size: 0.875rem;
}

.breadcrumb a {
    color: var(--color-text-muted);

    font-weight: 500;

    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--color-primary);

    text-decoration: underline;
}

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

.breadcrumb-current,
.breadcrumb [aria-current="page"] {
    color: var(--color-primary);

    font-weight: 800;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    margin-top: auto;

    border-top: 1px solid var(--color-border);

    color: var(--color-text-muted);
}

.site-footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    padding-block: var(--space-4);

    font-size: 0.78rem;
}

.site-footer-brand {
    color: var(--color-text);

    font-weight: 800;
}

.site-footer-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.site-footer-navigation a {
    color: var(--color-text-muted);

    text-decoration: none;
}

.site-footer-navigation a:hover,
.site-footer-navigation a:focus-visible {
    color: var(--color-primary);

    text-decoration: underline;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 600px) {
    :root {
        --page-gutter: 1rem;
    }

    .site-footer-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .page-header {
        margin-bottom: var(--space-6);
    }

    .page-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .button {
        width: auto;
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 900px) {
    :root {
        --page-gutter: 1.5rem;
    }

    .site-navigation {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;

        min-height: 68px;

        padding-block: var(--space-2);
    }

    .site-navigation-main {
        flex-wrap: nowrap;

        gap: var(--space-5);
    }

    .site-brand {
        flex-shrink: 0;
    }

    .site-navigation-account {
        justify-content: flex-end;

        padding-top: 0;

        border-top: 0;
    }

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

/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .screen-only {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .site-main {
        padding: 0;
    }
}