/* ============================================================================
   tokens-6b.css — SINGLE SOURCE OF TRUTH for the "6b · Czerwona ściana" direction
   Akademia Judo Dragon. Derived 1:1 from "Judo Dragon - Projekt.dc.html" (comp 8a).
   Language: session-red walls, black ticker bands, gold accent, Kanit italic-800
   uppercase display + IBM Plex Sans body. SHARP corners, skewed accents.
   Every component in site-6b.css consumes var(--…) from here — never hardcode a hex.
   ============================================================================ */

:root {
  /* ---- Brand palette (exact hexes from comp 8a) ---- */
  --red:            #D81F26;   /* primary wall / brand — aligned 1:1 to live site header (2026-08) */
  --red-deep:       #780A0E;   /* hero gradient foot (rgba 120,10,14) — deep anchor, kept */
  --red-hover:      #B81A20;   /* interactive darken — re-derived from the new brand red */
  --ink:            #0F0F10;   /* black bands, ticker, footer */
  --ink-scrim:      rgba(15,15,16,.88); /* caption plates over photos */
  --gold:           #F2C94C;   /* accent — eyebrows, CTA chip, dividers */
  --paper:          #FBFAF7;   /* light sections */
  --white:          #ffffff;

  /* ---- Text on light (paper/white) ---- */
  --text:           #0F0F10;   /* headings on light */
  --text-body:      #444444;
  --text-soft:      #555555;
  --text-mute:      #777777;
  --text-faint:     #999999;
  --line:           #dddddd;   /* hairlines on light */
  --line-strong:    #0F0F10;   /* 2.5px section underline */

  /* ---- Text on red ---- */
  --on-red:         #ffffff;
  --on-red-soft:    #ffd9db;   /* pink-tint body on red */

  /* ---- Text on ink (black) ---- */
  --on-ink:         #ffffff;
  --on-ink-soft:    #b9b9b9;
  --on-ink-mute:    #999999;
  --on-ink-faint:   #777777;
  --hair-ink:       rgba(255,255,255,.16);
  --hair-ink-soft:  rgba(255,255,255,.12);

  /* ---- Belt scale (used ONLY in the exam / Droga smoka device) ---- */
  --belt-white:  #F2F2EF;
  --belt-yellow: #F4C81E;
  --belt-orange: #EE7A17;
  --belt-green:  #1F9A4D;
  --belt-blue:   #1E5FBF;
  --belt-brown:  #6E3B23;
  --belt-black:  #16171A;
  --belt-line:   rgba(15,15,16,.45);
  --belt-inset:  rgba(15,15,16,.14);
  /* Tied-belt silhouette (knot + two hanging tails) — sharp/geometric 6b translation
     of a real judo belt. Used as a CSS mask so the --belt-* colour/gradient shows
     through the shape (Droga smoka ladder + egzaminy chart). fill=#fff → works in
     both alpha and luminance mask modes. */
  --belt-tie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cg fill='%23fff'%3E%3Crect x='3' y='12' width='58' height='12'/%3E%3Crect x='25' y='7' width='14' height='21'/%3E%3Cpolygon points='26,27 31,27 29,45 23,45'/%3E%3Cpolygon points='33,27 38,27 41,45 35,45'/%3E%3C/g%3E%3C/svg%3E");

  /* Wysokość zamykanego paska ogłoszeń — offset absolutnego nagłówka nad hero. */
  --promo-h: 40px;

  /* ---- Type families ---- */
  --font-display: 'Kanit', system-ui, sans-serif;               /* italic 800 uppercase */
  --font-ui:      'Kanit', system-ui, sans-serif;               /* 500 / 600 labels, nav */
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Fluid display ramp (interpolates 390px comp → 1280px comp) ---- */
  /* Display tier escalated (gauntlet R1: scale-as-punctuation vs award bar) —
     hero larger + a dedicated MEGA tier reserved for the few architectural
     type-moments (hero bleed, one editorial header, closing wordmark). */
  --fs-hero:     clamp(2.6rem, 1.1rem + 5.2vw, 5.25rem);      /* 42 → 84 — dłuższy, 2-zdaniowy nagłówek („Judo kształtuje charakter…") */
  --fs-hero-sub: clamp(2.25rem, 1.2rem + 3.2vw, 4.25rem);    /* 36 → 68 — subpage masthead title (sits in the 42% ink column of the hard-seam hero, R9) */
  --fs-section:  clamp(2.375rem, 1.4rem + 3vw, 3.5rem);      /* 38 → 56 — PRIMARY section title (chapter break). "Type as punctuation" tier
                                                                (R12): sits above the label register, below news-masthead/hero so the
                                                                eyebrow→title jump reads as intent. Consumed by every band's section title. */
  --fs-section-xs: 2.0625rem;                                /* 33 — DOLNY stopień tytułu sekcji, wyłącznie ≤400 px.
                                                                Podłoga --fs-section (38) nie mieści przy 320 px
                                                                najdłuższego słowa nagłówków („bezpieczeństwo": 321 px
                                                                przy rubryce 288 px → 17 px poziomego przewijania),
                                                                a łamania wyrazu zabrania bramka `lamane-slowa.mjs`
                                                                (paczka #73). 33 px daje temu słowu 279 px, czyli 9 px
                                                                zapasu. Wartość nie jest nowa w drabinie — to sufit
                                                                --fs-h2-vid, ten sam stopień w innej roli. */
  --fs-mega:     clamp(3.5rem, 0.5rem + 13vw, 11rem);        /* 56 → 176 — anchors only */
  --fs-h2:       clamp(1.8125rem, 1.15rem + 2.6vw, 2.5625rem); /* 29 → 41 */
  --fs-h2-mid:   clamp(1.625rem, 1.15rem + 1.9vw, 2.1875rem);  /* 26 → 35 */
  --fs-h2-vid:   clamp(1.625rem, 1.25rem + 1.5vw, 2.0625rem);  /* 26 → 33 */
  --fs-h2-rail:  clamp(1.625rem, 0.4rem + 2.9vw, 3.5rem);      /* 26 → 56 — tytuł sekcji STOJĄCY W WĄSKIM
                                                                RAIL-U (kolumna tryptyku, nie pełna szerokość).
                                                                Sufit równy --fs-section, ale podłoga zjeżdża do
                                                                stopnia --fs-h2-mid, bo w kolumnie ~380 px stały
                                                                rozmiar łamie nagłówek na cztery wiersze (zmierzone
                                                                na „JUDO DRAGON DLA KAŻDEGO": h2 108 → 215 px
                                                                poniżej 1200 px). Nowy stopień, nie wyjątek. */
  --fs-band:     clamp(1.8125rem, 1.25rem + 2.2vw, 2.6875rem); /* 29 → 43 (belt/cta/stats) */
  --fs-card:     clamp(1.0625rem, 0.85rem + 0.85vw, 1.4375rem);/* 17 → 23 card titles */
  --fs-coach:    clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);  /* 17 → 20 coach names */
  --fs-loc:      clamp(0.9375rem, 0.85rem + 0.35vw, 1.1875rem);/* 15 → 19 location names */

  /* ---- Static UI / body sizes ---- */
  --fs-17:       1.0625rem;    /* 17px news headline */
  --fs-15:       0.9375rem;    /* 15px button / small heading */
  --fs-14:       0.875rem;     /* 14px ladder / list */
  --fs-sm:       0.8125rem;    /* 13px small copy (ticker, intros) */
  --fs-eyebrow:  0.75rem;      /* 12px eyebrow (Kanit 600, tracked) */
  --fs-12:       0.75rem;      /* 12px fine print / captions */
  --fs-eyebrow-sm: 0.625rem;   /* 10px mobile eyebrow */
  --fs-nav:      0.84375rem;   /* 13.5px nav (Kanit italic 600) */
  --fs-lead:     clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem); /* 13.5 → 15 lead on media */
  --fs-body:     0.84375rem;   /* 13.5px body */
  --fs-body-sm:  0.78125rem;   /* 12.5px small body */
  --fs-micro:    0.71875rem;   /* 11.5px micro */
  --fs-label:    0.6875rem;    /* 11px functional label */

  /* ---- One-off UI sizes (kept in SoT; component CSS must not hardcode) ---- */
  --fs-2xl:         2rem;       /* 32px — mobile stat number, nav-panel close glyph */
  --fs-promo-x:     1.375rem;   /* 22px — promo close glyph (×) w slim pasku ogłoszeń */
  --fs-signup-h2:   1.625rem;   /* 26px — signup card heading */
  --fs-panel-link:  1.6rem;     /* 25.6px — mobile nav-panel links */
  --fs-wordmark:    1.35rem;    /* 21.6px — live-text brand wordmark (desktop; placeholder for wordmark-white.png) */
  --fs-wordmark-sm: 1.15rem;    /* 18.4px — brand wordmark (footer / ≤860) */
  --fs-btn-lg:      1rem;       /* 16px — .btn--lg */
  --fs-wordmark-xs: 1rem;       /* 16px — brand wordmark (≤600) */
  --fs-social:      0.65625rem; /* 10.5px — footer social links */
  --fs-phone-lbl:   0.59375rem; /* 9.5px — legenda pinezki na mapie (dragon-map.html) */

  --lh-body: 1.8;
  --lh-tight: 1.05;

  /* ---- Layout ---- */
  --wrap:        1280px;
  --gutter:      clamp(1rem, 4vw, 2.75rem);           /* 16 → 44 side padding */
  --band-y:      clamp(1.625rem, 0.9rem + 3.4vw, 3.25rem); /* 26 → 52 section vertical */
  --band-y-tight:clamp(1.375rem, 1rem + 1.8vw, 2.375rem);  /* tighter bands */

  /* ---- Shape: 6b is SHARP. No rounded corners (circles are opt-in per element). */
  --r: 0;

  /* ---- Elevation: SURFACE shadows are warm-red / ink tints (Tinted-Surface-Shadow rule) ---- */
  --sh-card:  0 6px 14px rgba(80,2,6,.25);
  --sh-cta:   0 8px 22px rgba(15,15,16,.45);
  --sh-chip:  0 6px 16px rgba(15,15,16,.4);
  --sh-pin:   0 6px 14px rgba(15,15,16,.45);
  --sh-header: 0 6px 22px rgba(0,0,0,.4);   /* scrolled header drop — neutral black (legibility) */

  /* ---- Text-shadows: neutral black, ONLY for white text over photography (Black-Only-For-Legibility rule) ---- */
  --tsh-hero:     0 4px 30px rgba(0,0,0,.35);  /* hero headline */
  --tsh-hero-sub: 0 2px 10px rgba(0,0,0,.5), 0 8px 34px rgba(0,0,0,.45);  /* subpage masthead — tighter halo, because the title runs past the scrim plateau on wide viewports */
  --tsh-lead:     0 2px 14px rgba(0,0,0,.4);   /* hero subhead */
  --tsh-wordmark: 0 4px 14px rgba(0,0,0,.5);   /* brand wordmark over hero */
  --tsh-nav:      0 2px 12px rgba(0,0,0,.55);  /* nav links over hero */
  --sh-crest:     0 6px 18px rgba(0,0,0,.55);  /* header crest drop-shadow over hero */

  --focus: 3px solid var(--gold);

  /* ---- Motion (SoT). Durations + eases only; keyframe geometry stays in keyframes. ---- */
  --ease:      cubic-bezier(.2,.7,.2,1);   /* hover / interactive */
  --ease-out:  cubic-bezier(.16,1,.3,1);   /* confident deceleration for entrances (no bounce) */
  --dur:       .28s;                        /* default interactive */
  --dur-fast:  .16s;                        /* immediate feedback */
  --dur-mid:   .3s;                         /* routine state change / overlays */
  --dur-slow:  .5s;                         /* reveals */
  --dur-hero:  .8s;                         /* the one authored hero entrance */
}