/*
 * BXR Glory - global design system.
 *
 * Two variable families live here:
 *   --clr-*   raw primitives (tokens). Never use them directly in a component.
 *   --color-* semantic system variables. Components use these, they follow the theme.
 *
 * The brand is dark-first: :root is the dark ("ring") theme, the light
 * ("concrete") theme is an override for users who ask for it.
 */

:root {
    /* Design Tokens (Primitives) - Brand */
    /* Official logo black, taken from the source PDF (CMYK 100K). Reserved for the
       logo badge and print-facing surfaces - the screen background is deeper. */
    --clr-brand-black: #231f20;

    /* Design Tokens (Primitives) - Ring */
    --clr-ring-black: #0a0a0b;
    --clr-corner-black: #141417;
    --clr-canvas-black: #1c1c20;
    --clr-concrete-900: #2b2b30;
    --clr-concrete-700: #45454c;
    --clr-concrete-500: #7d7d86;
    --clr-concrete-300: #b8b5ae;
    --clr-concrete-200: #d8d5ce;
    --clr-concrete-100: #eceae4;
    --clr-chalk-white: #fbfaf8;

    /* Design Tokens (Primitives) - Glory */
    --clr-gold-700: #8a6d17;
    --clr-gold-500: #c9a227;
    --clr-gold-400: #ddbe62;
    --clr-gold-200: #f0e0ab;
    --clr-blood-500: #b3122a;

    /* Spacing (Fluid) */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
    --space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.65rem);
    --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    --space-m: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    --space-l: clamp(2rem, 1.8rem + 1vw, 3rem);
    --space-xl: clamp(3rem, 2.6rem + 2vw, 5rem);
    --space-2xl: clamp(5rem, 4.4rem + 3vw, 8rem);

    /* Typography */
    --font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
    --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

    --size-step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --size-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
    --size-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);
    --size-step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
    --size-step-3: clamp(2.2rem, 1.8rem + 2vw, 3.5rem);
    --size-step-4: clamp(3rem, 2.2rem + 4vw, 6rem);

    /* Layout */
    --measure: 65ch;
    --wrapper-max: 82rem;
    --radius-none: 0;
    --radius-s: 2px;
    --radius-m: 4px;
    /* Sticky header heights. `--header-height` is the shrunk state and is what
       anchors scroll clear of; `--header-height-top` is the initial state and is
       what the hero pulls itself up by so the bar floats over the photo. */
    --header-height: 4.5rem;
    --header-height-top: 5.5rem;

    /* Motion - short, hard, "punchy" like the sport itself */
    --ease-punch: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-jab: cubic-bezier(0.7, 0, 0.3, 1);
    --duration-fast: 160ms;
    --duration-base: 320ms;
    --duration-slow: 640ms;
}

/*
 * Semantic system.
 *
 * `:root` carries the palette of the current theme. Three utility classes
 * re-scope it for anything that must not follow the theme:
 *
 *   .t-invert   the palette of the *other* theme. This is how the page keeps
 *               alternating dark and light full-width bands in both themes: the
 *               light "concrete" band on a dark page becomes a dark band on a
 *               light page, and the rhythm of contrast survives either way.
 *   .t-ring     always the dark palette. For surfaces that are dark by
 *               definition - the hero photo, the header over it, the call bar.
 *   .t-concrete always the light palette.
 *
 * Two palettes, each written twice (inside and outside the media query). That
 * repetition is the price of doing this in plain CSS; the raw colours still
 * live in exactly one place, up in the --clr-* tokens.
 */

/* Dark ("ring") palette - the default, because the brand is black. */
:root,
.t-ring,
.t-invert .t-invert {
    --color-surface: var(--clr-ring-black);
    --color-surface-raised: var(--clr-corner-black);
    --color-surface-sunken: #050506;
    --color-surface-invert: var(--clr-concrete-100);

    --color-text: var(--clr-chalk-white);
    --color-text-muted: var(--clr-concrete-300);
    --color-text-invert: var(--clr-ring-black);

    --color-accent: var(--clr-gold-500);
    --color-accent-soft: var(--clr-gold-400);
    --color-accent-strong: var(--clr-gold-200);
    --color-on-accent: var(--clr-ring-black);

    --color-danger: var(--clr-blood-500);

    --color-border: var(--clr-concrete-900);
    --color-border-strong: var(--clr-concrete-700);
    --color-border-accent: color-mix(in srgb, var(--clr-gold-500) 55%, transparent);

    --shadow-raised: 0 18px 48px rgb(0 0 0 / 55%);
    --shadow-flat: 0 2px 12px rgb(0 0 0 / 35%);

    /*
     * Discipline colours. disciplines.yaml stores the semantic name ("steel"),
     * never a hex, so the schedule colour-codes correctly in both themes.
     * Colour never carries meaning on its own - the discipline is always named.
     */
    --color-discipline-gold: var(--clr-gold-500);
    --color-discipline-steel: #7ba2bd;
    --color-discipline-chalk: var(--clr-chalk-white);
    --color-discipline-concrete: var(--clr-concrete-300);

    /* Concrete texture tint, tuned per palette so the noise never turns milky. */
    --texture-opacity: 0.05;
}

/* Light ("concrete") palette. */
.t-invert,
.t-concrete {
    --color-surface: var(--clr-concrete-100);
    --color-surface-raised: var(--clr-chalk-white);
    --color-surface-sunken: var(--clr-concrete-200);
    --color-surface-invert: var(--clr-ring-black);

    --color-text: var(--clr-ring-black);
    --color-text-muted: #56554f;
    --color-text-invert: var(--clr-chalk-white);

    --color-accent: var(--clr-gold-700);
    --color-accent-soft: var(--clr-gold-700);
    --color-accent-strong: var(--clr-gold-700);
    --color-on-accent: var(--clr-chalk-white);

    --color-danger: #96101f;

    --color-border: var(--clr-concrete-200);
    --color-border-strong: var(--clr-concrete-300);
    --color-border-accent: color-mix(in srgb, var(--clr-gold-700) 45%, transparent);

    --shadow-raised: 0 18px 48px rgb(10 10 11 / 18%);
    --shadow-flat: 0 2px 12px rgb(10 10 11 / 10%);

    --color-discipline-gold: var(--clr-gold-700);
    --color-discipline-steel: #2f5b78;
    --color-discipline-chalk: #34343a;
    --color-discipline-concrete: #6a6960;

    --texture-opacity: 0.09;
}

@media (prefers-color-scheme: light) {
    :root,
    .t-concrete,
    .t-invert .t-invert {
        --color-surface: var(--clr-concrete-100);
        --color-surface-raised: var(--clr-chalk-white);
        --color-surface-sunken: var(--clr-concrete-200);
        --color-surface-invert: var(--clr-ring-black);

        --color-text: var(--clr-ring-black);
        --color-text-muted: #56554f;
        --color-text-invert: var(--clr-chalk-white);

        --color-accent: var(--clr-gold-700);
        --color-accent-soft: var(--clr-gold-700);
        --color-accent-strong: var(--clr-gold-700);
        --color-on-accent: var(--clr-chalk-white);

        --color-danger: #96101f;

        --color-border: var(--clr-concrete-200);
        --color-border-strong: var(--clr-concrete-300);
        --color-border-accent: color-mix(in srgb, var(--clr-gold-700) 45%, transparent);

        --shadow-raised: 0 18px 48px rgb(10 10 11 / 18%);
        --shadow-flat: 0 2px 12px rgb(10 10 11 / 10%);

        --color-discipline-gold: var(--clr-gold-700);
        --color-discipline-steel: #2f5b78;
        --color-discipline-chalk: #34343a;
        --color-discipline-concrete: #6a6960;

        --texture-opacity: 0.09;
    }

    .t-invert,
    .t-ring {
        --color-surface: var(--clr-ring-black);
        --color-surface-raised: var(--clr-corner-black);
        --color-surface-sunken: #050506;
        --color-surface-invert: var(--clr-concrete-100);

        --color-text: var(--clr-chalk-white);
        --color-text-muted: var(--clr-concrete-300);
        --color-text-invert: var(--clr-ring-black);

        --color-accent: var(--clr-gold-500);
        --color-accent-soft: var(--clr-gold-400);
        --color-accent-strong: var(--clr-gold-200);
        --color-on-accent: var(--clr-ring-black);

        --color-danger: var(--clr-blood-500);

        --color-border: var(--clr-concrete-900);
        --color-border-strong: var(--clr-concrete-700);
        --color-border-accent: color-mix(in srgb, var(--clr-gold-500) 55%, transparent);

        --shadow-raised: 0 18px 48px rgb(0 0 0 / 55%);
        --shadow-flat: 0 2px 12px rgb(0 0 0 / 35%);

        --color-discipline-gold: var(--clr-gold-500);
        --color-discipline-steel: #7ba2bd;
        --color-discipline-chalk: var(--clr-chalk-white);
        --color-discipline-concrete: var(--clr-concrete-300);

        --texture-opacity: 0.05;
    }
}

/*
 * Layer order is declared inline in base.html.twig so that it is fixed before
 * any component stylesheet loads. Repeated here for standalone use of this file.
 */
@layer base, components, utilities;

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

    html {
        scroll-behavior: smooth;
        /* The sticky header must not cover anchored sections. */
        scroll-padding-block-start: calc(var(--header-height) + var(--space-s));
    }

    body {
        margin: 0;
        background-color: var(--color-surface);
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: var(--size-step-0);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 400;
        line-height: 0.95;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        margin: 0;
        /* Anton has generous side bearings; pull them back so headings align
           optically with the text below them. */
        text-wrap: balance;
    }

    p {
        margin: 0;
        max-width: var(--measure);
        text-wrap: pretty;
    }

    a {
        color: inherit;
        text-decoration-color: var(--color-border-accent);
        text-underline-offset: 0.25em;
    }

    img,
    picture,
    svg,
    iframe {
        display: block;
        max-width: 100%;
    }

    ul, ol {
        margin: 0;
    }

    :focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
    }

    ::selection {
        background-color: var(--color-accent);
        color: var(--color-on-accent);
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Composition utilities shared by every component (CUBE "C" and "U") */
@layer utilities {
    .l-wrapper {
        width: min(100% - 2 * var(--space-m), var(--wrapper-max));
        margin-inline: auto;
    }

    .l-stack > * + * {
        margin-block-start: var(--flow-space, var(--space-m));
    }

    .l-section {
        padding-block: var(--space-2xl);
    }

    /* A full-bleed horizontal band. The page is built by stacking these. */
    .l-band {
        position: relative;
        background-color: var(--color-surface);
        color: var(--color-text);

        &[data-tone="sunken"] {
            background-color: var(--color-surface-sunken);
        }

        &[data-tone="raised"] {
            background-color: var(--color-surface-raised);
        }
    }

    /* The thin gold hairline that separates the main bands. */
    .l-band[data-rule="top"] {
        border-block-start: 1px solid var(--color-border-accent);
    }

    .l-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: var(--cluster-align, center);
        gap: var(--cluster-gap, var(--space-s));
    }

    .l-grid {
        display: grid;
        gap: var(--grid-gap, var(--space-l));
        grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
    }

    /* Small uppercase label that sits above a section heading. */
    .u-eyebrow {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        margin: 0;
        font-size: var(--size-step--1);
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-text-muted);

        &::before {
            content: '';
            inline-size: var(--space-m);
            block-size: 1px;
            background-color: var(--color-accent);
        }
    }

    .u-measure {
        max-width: var(--measure);
    }

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

    .u-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /*
     * Concrete grain. Applied as a pseudo-element so it never tints text and can
     * be dropped on any band. Deterministic SVG turbulence - no image request.
     */
    .u-texture::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: var(--texture-opacity);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
    }

    /*
     * Scroll reveal. The element starts shifted and transparent; the reveal
     * Stimulus controller flips data-revealed once, when it enters the viewport.
     * Without JS (or with reduced motion) the content is simply visible.
     */
    @media (prefers-reduced-motion: no-preference) {
        [data-reveal]:not([data-revealed]) {
            opacity: 0;
            translate: 0 24px;
        }

        [data-reveal] {
            transition:
                opacity var(--duration-slow) var(--ease-punch),
                translate var(--duration-slow) var(--ease-punch);
            transition-delay: var(--reveal-delay, 0ms);
        }
    }
}