/*
 * Masuria Esport - design tokens (tokens.css)
 * Source of truth: Figma frame 1440 px wide (desktop only). All values below are taken from the extracted section specs.
 *
 * Conventions
 *  - Custom properties are prefixed --msr-.
 *  - Font sizes are named by their design px value and stored in rem (1rem = 16px, so identical at default zoom).
 *  - Spacing / layout dimensions are named by their design px value and stored in px.
 *  - Letter-spacing is stored in em (design px value / font-size), so it scales with the text.
 *  - Anything marked "ADDED: not in design" is an accessibility / robustness extra that does not change the 1440 px look.
 */

:root {
  /* ==========================================================================
     Colours
     ========================================================================== */

  /* Base palette */
  --msr-bg: #0a0a0a;                          /* page background, gradient end colour */
  --msr-surface: #1a1a1a;                     /* cards, footer, inactive step discs */
  --msr-surface-alt: #09090b;                 /* requirements section background (slightly different from --msr-bg) */
  --msr-surface-tile: rgba(26, 26, 26, 0.4);  /* tile surfaces */
  --msr-gold: #c5a059;                        /* accent: buttons, labels, icons */
  --msr-white: #ffffff;
  --msr-on-gold: #0a0a0a;                     /* text on gold (buttons, offer badge) */
  --msr-gold-hover: #d4b26f;                  /* ADDED: not in design - hover state of gold surfaces */

  /* White alpha ladder (text and hairlines on dark). Suffix = alpha in percent. */
  --msr-white-05: rgba(255, 255, 255, 0.05);  /* hairlines, card borders, ghost button fill */
  --msr-white-10: rgba(255, 255, 255, 0.1);   /* timeline line, inactive disc border, social borders, copyright */
  --msr-white-20: rgba(255, 255, 255, 0.2);   /* ghost button border, footer "STWORZONE Z" */
  --msr-white-30: rgba(255, 255, 255, 0.3);   /* footer description, CTA badges + dots */
  --msr-white-40: rgba(255, 255, 255, 0.4);   /* process captions, requirement descriptions, footer links */
  --msr-white-50: rgba(255, 255, 255, 0.5);   /* requirements lead, offer descriptions */
  --msr-white-60: rgba(255, 255, 255, 0.6);   /* hero subtitle, CTA paragraph */
  --msr-white-70: rgba(255, 255, 255, 0.7);   /* inactive nav links */

  /* Gold alphas. Suffix = alpha in percent (00 = fully transparent gold, for gradient ends). */
  --msr-gold-00: rgba(197, 160, 89, 0);
  --msr-gold-05: rgba(197, 160, 89, 0.05);    /* process radial glow */
  --msr-gold-10: rgba(197, 160, 89, 0.1);     /* offer icon box fill, watermark-level tints */
  --msr-gold-20: rgba(197, 160, 89, 0.2);     /* active-step ring, head-coach frame gradient start */
  --msr-gold-30: rgba(197, 160, 89, 0.3);     /* head-coach card border, offer icon box border, button glow */

  /* Page-background alphas (gradient stops) */
  --msr-bg-40: rgba(10, 10, 10, 0.4);         /* hero gradient start */
  --msr-bg-90: rgba(10, 10, 10, 0.9);         /* CTA gradient middle */

  /* Semantic aliases */
  --msr-text: var(--msr-white);
  --msr-accent: var(--msr-gold);
  --msr-border-subtle: var(--msr-white-05);   /* nav bottom line, section hairlines, card borders, footer top border */
  --msr-border: var(--msr-white-10);          /* process line, inactive disc, footer social squares */
  --msr-border-strong: var(--msr-white-20);   /* ghost button */
  --msr-border-gold: var(--msr-gold-30);      /* head-coach card, offer icon box */

  /* ==========================================================================
     Gradients (defined once, reused by the section stylesheets)
     ========================================================================== */
  --msr-gradient-hero-fade: linear-gradient(to bottom, var(--msr-bg-40) 0%, var(--msr-bg) 90%);
  --msr-gradient-cta-fade: linear-gradient(to top, var(--msr-bg) 0%, var(--msr-bg-90) 50%, var(--msr-bg) 100%);
  --msr-gradient-process-glow: radial-gradient(523px 523.5px at 30% 50%, var(--msr-gold-05) 0%, var(--msr-gold-00) 100%);
  --msr-gradient-gold-frame: linear-gradient(to bottom, var(--msr-gold-20), var(--msr-gold-00));

  /* ==========================================================================
     Typography
     ========================================================================== */

  /* Families (the @font-face rules live in fonts.css; fallbacks are only used before the swap / if a file is blocked) */
  --msr-font-heading: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --msr-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --msr-font-brand: 'Syncopate', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;  /* wordmark "MSR" + requirements watermark */

  /* Weights */
  --msr-fw-light: 300;
  --msr-fw-regular: 400;
  --msr-fw-semibold: 600;
  --msr-fw-bold: 700;
  --msr-fw-extrabold: 800;
  --msr-fw-black: 900;

  /* Font sizes (name = design px) */
  --msr-fs-10: 0.625rem;     /* nav tagline, footer credits + copyright */
  --msr-fs-12: 0.75rem;      /* nav links, nav button, eyebrow, badges, captions, role labels */
  --msr-fs-14: 0.875rem;     /* buttons, descriptions, footer links */
  --msr-fs-16: 1rem;         /* footer headings */
  --msr-fs-18: 1.125rem;     /* CTA button, requirements lead, process step titles */
  --msr-fs-20: 1.25rem;      /* wordmark, hero subtitle, CTA paragraph, card titles */
  --msr-fs-24: 1.5rem;       /* head-coach heading */
  --msr-fs-36: 2.25rem;      /* section titles, "#01" index */
  --msr-fs-48: 3rem;         /* requirements H2 (Figma 47.813px) */
  --msr-fs-60: 3.75rem;      /* CTA H2, offer badge number, requirements watermark */
  --msr-fs-72: 4.5rem;       /* hero H1, Kontakt H2 (--msr-section-title--xxl) */
  --msr-fs-120: 7.5rem;      /* contact "MSR" watermark (--msr-watermark--solid) */
  --msr-fs-300: 18.75rem;    /* hero "MSR" watermark */

  /* Line heights. Unitless ratios where the design is proportional, otherwise the design px value in rem. */
  --msr-lh-none: 1;          /* 10/10, 48/48, 60/60, 300/300 */
  --msr-lh-relaxed: 1.625;   /* 12/19.5 caption, 14/22.75 descriptions, 20/32.5 hero subtitle */
  --msr-lh-15: 0.9375rem;    /* 10px footer text */
  --msr-lh-16: 1rem;         /* 12px text */
  --msr-lh-20: 1.25rem;      /* 14px text */
  --msr-lh-24: 1.5rem;       /* 16px text, footer headings */
  --msr-lh-28: 1.75rem;      /* 18px + 20px text */
  --msr-lh-32: 2rem;         /* 24px head-coach heading */
  --msr-lh-40: 2.5rem;       /* 36px titles */
  --msr-lh-90: 5.625rem;     /* 72px hero H1 */

  /* Letter spacing (em = design px / font-size) */
  --msr-ls-tighter: -0.05em;   /* wordmark -1px@20, CTA H2 -3px@60, process caption -0.6px@12, "CLANAREA" -0.9px@18 */
  --msr-ls-tight: -0.025em;    /* requirements H2 -1.2px@48 */
  --msr-ls-normal: 0;
  --msr-ls-wide: 0.05em;       /* section titles 1.8px@36, role labels 0.6px@12 */
  --msr-ls-wider: 0.1em;       /* buttons (sm/default), badges, footer headings, copyright */
  --msr-ls-widest: 0.2em;      /* nav links, tagline, head-coach heading, large CTA button */
  --msr-ls-credit: 0.3em;      /* footer "STWORZONE Z" 3px@10 */
  --msr-ls-eyebrow: 0.5em;     /* process subtitle 6px@12 */
  --msr-ls-watermark: -0.0117em; /* hero "MSR" -3.5156px@300 */

  /* ==========================================================================
     Spacing (name = design px)
     ========================================================================== */
  --msr-space-4: 4px;
  --msr-space-8: 8px;
  --msr-space-12: 12px;
  --msr-space-16: 16px;
  --msr-space-20: 20px;
  --msr-space-24: 24px;
  --msr-space-32: 32px;
  --msr-space-40: 40px;
  --msr-space-48: 48px;
  --msr-space-64: 64px;
  --msr-space-80: 80px;
  --msr-space-96: 96px;
  --msr-space-128: 128px;
  --msr-space-160: 160px;

  /* Gaps between blocks */
  --msr-gap-xs: 16px;
  --msr-gap-sm: 24px;
  --msr-gap-md: 32px;
  --msr-gap-lg: 48px;
  --msr-gap-xl: 80px;

  /* Vertical section padding (design values) */
  --msr-section-py-sm: 96px;    /* footer */
  --msr-section-py: 128px;      /* process, requirements, offer */
  --msr-section-py-lg: 160px;   /* CTA */

  /* ADDED: not in design - fluid variants, identical to the values above at 1440 px and wider, smaller on narrow screens.
     Floors lowered 2026-09-22 (user request): stacked section paddings made mobile gaps feel oversized (up to 184px). */
  --msr-section-py-sm-fluid: clamp(32px, 6.6667vw, 96px);
  --msr-section-py-fluid: clamp(40px, 8.8889vw, 128px);
  --msr-section-py-lg-fluid: clamp(48px, 11.1111vw, 160px);
  --msr-section-gap-fluid: clamp(16px, 6.1111vw, 88px); /* QA: the 88px blank band between the previous section border and the process section in the design (1794 -> 1883.5); 88 at >= 1440 */

  /* ==========================================================================
     Layout
     ========================================================================== */
  --msr-container: 1248px;                      /* content width (1440 - 2 x 96) */
  --msr-gutter: clamp(20px, 6.6667vw, 96px);    /* side padding: 96px at >= 1440px viewport, shrinks below (ADDED: not in design below 1440) */
  --msr-header-h: 97px;                         /* 24 + 48 + 24 padding/content + 1px bottom border */
  --msr-adminbar-h: 0px;                        /* ADDED: not in design - base.css sets 32px / 46px when the WP admin bar is shown */

  /* ==========================================================================
     Shape, effects
     ========================================================================== */
  --msr-radius-none: 0;         /* everything is square in the design */
  --msr-radius-sm: 2px;         /* offer photo only */
  --msr-radius-full: 9999px;    /* process discs, dots */

  --msr-blur-nav: 6px;          /* header backdrop-filter */
  --msr-blur-ghost: 2px;        /* ghost button backdrop-filter */

  --msr-glow-gold: 0 0 25px rgba(197, 160, 89, 0.3);         /* CTA button */
  --msr-ring-gold: 0 0 0 4px rgba(197, 160, 89, 0.2);        /* active process step (outside the 80px disc) */
  --msr-glow-gold-hover: 0 0 32px rgba(197, 160, 89, 0.45);  /* ADDED: not in design - hover state of the CTA glow */

  /* ==========================================================================
     Stacking
     ========================================================================== */
  --msr-z-behind: -1;
  --msr-z-base: 0;
  --msr-z-raised: 1;          /* section content above its own background layers */
  --msr-z-overlay: 2;
  --msr-z-header: 100;
  --msr-z-skip-link: 100000;  /* above the WP admin bar (99999) */

  /* ==========================================================================
     Motion (ADDED: not in design - the design has no transitions)
     ========================================================================== */
  --msr-duration-fast: 150ms;
  --msr-duration: 250ms;
  --msr-duration-slow: 400ms;
  --msr-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ADDED: not in design - one-time scroll/entrance reveal (assets/js/reveal.js + assets/css/animations.css).
     Kept separate from the durations above: those are for interactive state changes (hover, focus), this is
     for the slower, one-off "content arrives" motion. */
  --msr-reveal-distance: 24px;   /* translateY travel distance, within the 16-32px design brief */
  --msr-reveal-duration: 550ms;  /* within the 400-700ms design brief */
  --msr-reveal-stagger: 70ms;    /* delay between cascading siblings (role tiles, process steps, etc.) */
}