/* ---------------------------------------------------------------------------
   theme-tokens.css - every colour, font, radius and shadow in the theme.
   Nothing else in this project may contain a colour literal.
   Values are the approved design, variant C.
   --------------------------------------------------------------------------- */

/* Figtree Variable, latin subset, self-hosted.
   Never reference Google's font CDN in any form - self-hosting is
   mandatory (DSGVO; LG Muenchen I, 3 O 17493/20). Licence: SIL OFL 1.1,
   shipped as assets/fonts/figtree-OFL.txt. */
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-variable-latin.woff2') format('woff2-variations'),
         url('../fonts/figtree-variable-latin.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
    /* Palette - variant C */
    --bg:     #F6F5F2;
    --card:   #FFFFFF;
    --ink:    #171512;
    --ink2:   #5E5851;
    --red:    #C3252F;
    --blue:   #0B4A94;
    --line:   #E2DED6;

    /* Derived, so no component ever mixes its own colour */
    --link:         var(--blue);
    --link-hover:   var(--red);
    --focus-ring:   var(--blue);
    --badge-bg:     var(--red);
    --badge-ink:    var(--card);
    --on-accent:    var(--card);

    /* Sticky header: translucent over the page, blurred. The fallback is the
       opaque page background - see kodang-layout.css. */
    --header-bg:     color-mix(in srgb, var(--bg) 76%, transparent);
    --header-blur:   saturate(180%) blur(14px);
    --header-shadow: 0 1px 0 var(--line);

    /* Pill navigation */
    --nav-bg:          var(--card);
    --nav-ink:         var(--ink2);
    --nav-ink-hover:   var(--ink);
    --nav-current-bg:  var(--blue);
    --nav-current-ink: var(--on-accent);

    /* "Next training" box - solid blue, white type */
    --next-bg:        var(--blue);
    --next-ink:       var(--on-accent);
    --next-ink-muted: color-mix(in srgb, var(--on-accent) 74%, var(--blue));
    /* The disc behind the taegeuk on that box. It has to differ from
       --next-bg, or the blue half of the mark disappears into the box and
       leaves a red comma floating on blue - see KNOWN_ISSUES.md #20.
       tools/verify-site-output.js resolves both and fails if they get close. */
    --next-disc:      var(--card);

    /* Buttons. The primary is the red one; hover swaps to blue, the same two
       accents the links already trade between. */
    --button-bg:            var(--red);
    --button-ink:           var(--on-accent);
    --button-bg-hover:      var(--blue);
    --button-outline-bg:       transparent;
    --button-outline-ink:      var(--ink);
    --button-outline-border:   var(--ink2);
    --button-outline-bg-hover: var(--card);

    /* Schedule cards alternate their top rule between these two */
    --card-rule-a: var(--blue);
    --card-rule-b: var(--red);

    /* Fact card on the Verein page */
    --fact-number: var(--red);

    /* Shape */
    --radius:    14px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-card: 0 1px 2px rgb(23 21 18 / 6%), 0 8px 24px rgb(23 21 18 / 6%);
    --shadow-none: none;

    /* Type */
    --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --weight-regular: 400;
    --weight-medium:  550;
    --weight-bold:    700;

    --size-xs:   0.8125rem;
    --size-sm:   0.9375rem;
    --size-base: 1.0625rem;
    --size-lg:   1.25rem;
    --size-xl:   1.625rem;
    --size-2xl:  2.25rem;
    --size-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

    --leading-tight: 1.2;
    --leading-body:  1.65;

    /* Spacing scale */
    --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;
    --space-8: 4.5rem;

    /* Layout */
    --wrap-max: 68rem;
    --wrap-pad: var(--space-4);
    --card-rule-width: 4px;
    --schedule-card-min: 215px;

    /* The club logo. One asset (assets/images/logo_full.png, 749x760) in two
       places, so every size here has to stay within 2x of it. The header bar
       has no fixed height - it grows with the logo, which is its tallest
       element. */
    --logo-size:        68px;
    --logo-size-narrow: 52px;
    --hero-logo-max:        340px;
    --hero-logo-max-narrow: 230px;

    /* Sticky-header offsets for scroll-padding-top: an in-page anchor must not
       land underneath the bar. Slightly larger than the bar actually is, so
       the target starts clear of it rather than flush against it. The narrow
       value is much larger because the bar stacks below 600px and the nav pill
       wraps onto two rows at 320px. */
    --header-offset:        6.5rem;   /* bar measures 92px */
    --header-offset-narrow: 12rem;    /* bar measures 178px at 320 and 375 */

    /* Motion - set to 0s wholesale under prefers-reduced-motion */
    --spin-duration: 18s;
    --transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --spin-duration: 0s;
        --transition: 0s;
    }
}