/* Global CSS Variables for Color Scheme */
:root {
    /* Let native form controls, scrollbars, etc. follow the device theme. */
    color-scheme: light dark;

    /* Primary Colors */
    --color-primary: #b65c20;
    --color-secondary: #258c25;

    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fffe;
    --color-bg-muted: #f4f5f7;
    --color-bg-translucent: rgba(255, 255, 255, 0.8);

    /* Text Colors */
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-light: #ffffff;

    --color-border: rgba(0, 0, 0, 0.08);

    --color-error: #c62828;
    --color-error-bg: #ffebee;

    /* Color Variations with Opacity */
    --color-primary-light: rgba(255, 127, 80, 0.1);
    --color-primary-medium: rgba(255, 127, 80, 0.3);
    --color-secondary-light: rgba(50, 205, 50, 0.1);
    --color-secondary-medium: rgba(50, 205, 50, 0.3);

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.3);

    /* Bracket Colors */
    --color-bracket-1: #258c25;
    --color-bracket-1-light: #258c2519;
    --color-bracket-2: #8e8e8e;
    --color-bracket-2-light: #8e8e8e19;
    --color-bracket-3: #b65c20;
    --color-bracket-3-light: #b65c2019;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Brightened accents keep contrast against the dark surfaces. */
        --color-primary: #e0793a;
        --color-secondary: #3fb84a;

        --color-bg-primary: #121212;
        --color-bg-secondary: #1c1c1e;
        --color-bg-muted: #26262a;
        --color-bg-translucent: rgba(18, 18, 18, 0.8);

        --color-text-primary: #ededed;
        --color-text-secondary: #a3a3a3;
        --color-text-light: #ffffff;

        --color-border: rgba(255, 255, 255, 0.14);

        --color-error: #ff7b7b;
        --color-error-bg: rgba(198, 40, 40, 0.18);

        --color-primary-light: rgba(224, 121, 58, 0.16);
        --color-primary-medium: rgba(224, 121, 58, 0.32);
        --color-secondary-light: rgba(63, 184, 74, 0.16);
        --color-secondary-medium: rgba(63, 184, 74, 0.32);

        --shadow-light: rgba(0, 0, 0, 0.4);
        --shadow-medium: rgba(0, 0, 0, 0.5);
        --shadow-dark: rgba(0, 0, 0, 0.6);
        --shadow-darker: rgba(0, 0, 0, 0.7);

        --color-bracket-2: #a8a8a8;
    }
}

/* Global Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.container {
    margin: 0 auto;
    padding: 0 20px;
}

/* Main content area */
.main-content {
    margin-top: 80px;
}

/* Utility classes for common color usage */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-light { background-color: var(--color-bg-secondary); }

/* ==========================================================================
   Design-language building blocks
   --------------------------------------------------------------------------
   The single source of truth for the flat editorial sports aesthetic
   (flush-left column, 4px accent rule, heavy tight headings, hairline lists,
   text-link CTAs). Compose these classes on any public view instead of
   re-declaring the same rules in a route's <style> block. Restyling the whole
   app then means editing here, not every page. `.is-live` on an ancestor
   recolours accents from orange to the green "live" signal.
   ========================================================================== */

/* Page shell: full-height section with the standard responsive padding. */
.page-shell {
    padding: 6rem 2rem 4rem;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

/* The ~820px flush-left reading column. */
.page-column {
    max-width: 820px;
    margin: 0 auto;
}

/* Uppercase letter-spaced kicker above a heading. */
.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}
.is-live .eyebrow { color: var(--color-secondary); }

/* Heavy, tight display heading — the hero/page-title type. */
.display-title {
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: var(--color-text-primary);
    margin: 0;
}

/* Small uppercase section label (list-group headers, field labels). */
.section-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-secondary);
    margin: 0;
}
.section-label--accent { color: var(--color-secondary); }
.is-live .section-label { color: var(--color-secondary); }

/* Flat list of hairline-separated rows — never shadowed cards. */
.flat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.flat-list > li { border-bottom: 1px solid var(--color-border); }

/* Full-width row link: bold content left, nudging arrow right. */
.row-link {
    display: flex;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    padding: 1.15rem 0.25rem;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: color 0.15s ease;
}
.row-link:hover { color: var(--color-primary); }
.is-live .row-link:hover { color: var(--color-secondary); }

.row-arrow {
    margin-left: auto;
    font-weight: 700;
    color: var(--color-primary);
    transition: transform 0.15s ease;
}
.is-live .row-arrow { color: var(--color-secondary); }
.row-link:hover .row-arrow { transform: translateX(4px); }

/* Underlined text-link CTA (replaces pill buttons on public views). */
.text-link {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
    transition: opacity 0.15s ease;
}
.text-link:hover { opacity: 0.6; }

/* Quiet uppercase secondary link (e.g. "Alle Turniere →"). */
.quiet-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: color 0.15s ease;
}
.quiet-link:hover { color: var(--color-primary); }

@media (max-width: 640px) {
    .page-shell { padding: 5rem 1rem 3rem; }
}