/*
 * Permanentka — global design system, taken over from the BXR Glory club
 * website (../bxr_glory/assets/styles/app.css, _docs/dizajn.md). The token
 * names are identical on purpose, so the two stay recognisably one brand.
 *
 * 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 devices that ask for it.
 *
 * The layer order (base, components, utilities) is declared inline in
 * templates/base.html.twig, before any stylesheet loads; it is repeated here
 * for this file on its own.
 */
@layer base, components, utilities;

:root {
    /* Design Tokens (Primitives) - Brand */
    /* Official logo black, from the source PDF (CMYK 100K). Reserved for the
       logo badge — 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-800: #6e5612;
    --clr-gold-700: #8a6d17;
    --clr-gold-500: #c9a227;
    --clr-gold-400: #ddbe62;
    --clr-gold-200: #f0e0ab;
    /* Errors and nothing else. An ended pass is not an error and is not red. */
    --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;
    /* An app, not a magazine: one column that a thumb can reach. */
    --wrapper-max: 40rem;
    --radius-none: 0;
    --radius-s: 2px;
    --radius-m: 4px;
    /* A tap target never smaller than this (WCAG 2.5.5 asks for 44 px).
       48 px, Android's own minimum: at exactly 2.75rem Chromium measured
       the buttons at 43.99 px (sub-pixel layout), a hair under the floor. */
    --tap-min: 3rem;

    /* 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;
}

/* Dark ("ring") palette - the default, because the brand is black. */
:root {
    --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);
    /* The primary button under a pointer: lighter gold on black. */
    --color-accent-hover: var(--clr-gold-400);
    --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%);
}

/* Light ("concrete") palette. gold-500 fails contrast on a light surface,
   hence gold-700. */
@media (prefers-color-scheme: light) {
    :root {
        --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);
        /* Darker gold on a light surface — gold-700 is already the accent. */
        --color-accent-hover: var(--clr-gold-800);
        --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%);
    }
}

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

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

    body {
        margin: 0;
        min-block-size: 100dvh;
        display: flex;
        flex-direction: column;
        background-color: var(--color-surface);
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: var(--size-step-0);
        line-height: 1.6;
        -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;
        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 {
        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) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* The two blocks of templates/base.html.twig itself; everything else is a
   component with its own stylesheet. */
@layer components {
    .skip-link {
        position: absolute;
        inset-block-start: var(--space-2xs);
        inset-inline-start: var(--space-2xs);
        z-index: 10;
        padding: var(--space-2xs) var(--space-s);
        background: var(--color-accent);
        color: var(--color-on-accent);
        font-weight: 600;
        text-decoration: none;
        min-block-size: var(--tap-min);
        display: inline-flex;
        align-items: center;
        translate: 0 -200%;

        &:focus-visible {
            translate: 0 0;
        }
    }

    .site-main {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

/*
 * Turbo's progress bar, in the brand's gold instead of Turbo's blue. Turbo
 * injects its own <style> without a layer, and an unlayered rule beats every
 * layered one — so this one stays outside the layers, one step more specific.
 */
html .turbo-progress-bar {
    background-color: var(--color-accent);
}

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

    .l-stack > * {
        margin-block: 0;
    }

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

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

    /* Small uppercase label that sits above a 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-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;
    }
}