/* ==========================================================================
   KPA design tokens - single source of truth for the public site
   --------------------------------------------------------------------------
   Loaded before every other stylesheet on the public pages.

   The palette below is the club's actual brand, extracted from the Elementor
   global styles on kaizenparkouracademy.lu: navy #314057 / #29323F carries the
   buttons and dark sections, sky #71D4FF with the #EEFAFF / #E5F8FF tints
   carries backgrounds and accents, green #23A455 and yellow #FFE44C are the
   secondary accents, and the site is set in Roboto / Roboto Slab.

   (An earlier revision guessed cyan/orange from gradient literals left over in
   the old template - that guess is what made the deployed page look off-brand.)
   ========================================================================== */

:root {
    /* ---- Brand (kpa.lu Elementor globals) ------------------------------- */
    --kpa-navy: #314057;
    --kpa-navy-deep: #29323F;
    --kpa-sky: #71D4FF;
    --kpa-sky-tint: #EEFAFF;
    --kpa-sky-tint-2: #E5F8FF;
    --kpa-indigo: #4054B2;
    --kpa-green: #23A455;
    --kpa-yellow: #FFE44C;

    /* ---- Semantic colour ------------------------------------------------ */
    /* Navy is the brand's button/link colour and passes AA on white (~10:1).
       Sky is 2.1:1 on white - graphics and accents only, never text. */
    --primary-color: var(--kpa-navy);
    --primary-hover: var(--kpa-navy-deep);
    --secondary-color: #5a6270;
    --success-color: #1a7a3e;   /* darkened from brand green: #23A455 is 3.2:1
                                   under white text and fails AA on badges */
    --danger-color: #b02a37;
    --warning-color: #8a5a00;
    --info-color: var(--kpa-navy);

    /* ---- Surfaces and text ---------------------------------------------- */
    --bg: #f7f9fb;
    --card: #ffffff;
    --surface-alt: var(--kpa-sky-tint);
    --border: #dde3ea;
    --text: #1f2937;
    --text-muted: #545c66;
    --text-inverse: #ffffff;
    --text-white: #ffffff;

    /* ---- Gradients ------------------------------------------------------ */
    /* kpa.lu's buttons are flat navy; the "gradient" keeps only a subtle
       navy depth so tokens stay drop-in for existing consumers. */
    --gradient-primary: linear-gradient(135deg, var(--kpa-navy) 0%, var(--kpa-navy-deep) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--kpa-sky) 0%, var(--kpa-indigo) 100%);
    --gradient-subtle: linear-gradient(135deg, var(--kpa-sky-tint) 0%, var(--kpa-sky-tint-2) 100%);

    /* ---- Dark surfaces (footer, inverted sections) ---------------------- */
    --dark-bg: var(--kpa-navy-deep);
    --dark-card: var(--kpa-navy);
    --dark-border: #3e4e68;

    /* ---- Shape, depth, motion ------------------------------------------- */
    --border-radius: 10px;
    --border-radius-sm: 6px;
    --border-radius-lg: 18px;
    --box-shadow: 0 2px 8px rgba(41, 50, 63, 0.08);
    --box-shadow-lg: 0 12px 32px rgba(41, 50, 63, 0.16);
    --transition: all 0.25s ease-in-out;

    /* ---- Layout --------------------------------------------------------- */
    --navbar-height: 4.5rem;
    --touch-target-size: 44px;  /* WCAG 2.5.5 minimum */
    --section-spacing: 5rem;

    /* ---- Type (kpa.lu: Roboto body, Roboto Slab headings) --------------- */
    --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Roboto Slab', 'Roboto', Georgia, serif;

    /* Consumed by the scroll-progress bar; JS overwrites it per scroll frame. */
    --scroll-percent: 0%;
}

/* --------------------------------------------------------------------------
   No prefers-color-scheme block, deliberately. The previous auto dark theme
   flipped these tokens while Bootstrap's own components (dropdowns, alerts,
   native select options) stayed light, producing mismatched patches for any
   visitor with a dark OS. The brand site is a light design; if dark mode is
   ever wanted, Bootstrap's data-bs-theme is the vehicle, done as its own
   change with every component audited.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   High contrast
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    :root {
        --text-muted: var(--text);
        --border: var(--text);
    }
}

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