/* ============================================================================
   tokens.css — design tokens of the public site (lorespeak.pl).

   Echoes the admin panel and the desktop app: dark graphite with a faint
   violet cast, ONE restrained violet accent, muted status tones. Flat colours
   only. Every colour used by base/components/layout/page CSS comes from here;
   if a value is missing, add a token here instead of a raw hex in a rule.

   Load order: fonts.css → tokens.css → base.css → components.css → layout.css
   → page CSS.

   Device ranges — the ONLY media queries on the public site (no build
   step, so no custom media: write them literally, the same way
   everywhere):
     Phone             @media (max-width: 767px)
                       (the --gutter / --section-y / --grid-gap step at the
                       end of this file)
     Tablet portrait   @media (min-width: 768px) and (max-width: 1023px)
     Tablet landscape  @media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse)
                       (coarse pointer only, so small laptops keep the
                       desktop layout)
     Desktop           everything else
   plus the edges of those ranges on their own: (min-width: 768px),
   (min-width: 1024px), (max-width: 1023px). No other widths: a narrower
   phone step folds into Phone, a wide-desktop step becomes fluid CSS
   (clamp(), min(), auto-fill grids, container units). Feature queries
   (hover / pointer, prefers-reduced-motion, @supports) are fine.
   The topbar switches to the burger menu below 1024px (layout.css), i.e.
   on phones and tablet portrait.

   Hover effects (one rule for the whole public site). On a touch screen
   :hover fires on a tap and sticks, so these hovers are written inside
     @media (hover: hover) and (pointer: fine) { … }
   — a mouse (or a trackpad / pen) only; phones, tablets in both
   orientations and any coarse primary pointer never get them:
     · every effect that MOVES, SCALES, TILTS or LIFTS something, zooms an
       image, adds a glow / shadow bloom or reveals a light or an overlay;
     · ANY hover (colour, border, background included) on a CARD, a LIST
       ROW, a TILE or a LINK BLOCK — a tap on a card must not light it up
       (owner, 2026-10-15). The kit gates its own cards, rows and tiles
       once (components.css); pages do not add per-page resets.
   Plain colour hovers of buttons, links in running text and form fields
   stay outside (instant feedback, harmless when they stick).
   :focus-visible styles are never inside the query (keyboard), and there
   are no touch-only press effects. Where something must show without
   hover (e.g. an affordance revealed on hover), use the exact complement:
     @media (hover: none), (pointer: coarse) { … }
   JS that follows the cursor (.spotlight, [data-tilt] in main.js) runs
   only under the same query and for mouse / pen pointers.

   Firefox re-snaps an element to whole pixels when a transform on it ends,
   so text moved by a transform animation visibly jumps there. Every such
   animation gets an opacity-only fallback:
     @supports (-moz-appearance: none) { … animation-name: ls-fade-in; }
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:              #19181f;   /* page */
  --bg-alt:          #16151b;   /* alternate band */
  --bg-deep:         #131218;   /* footer, hero floor */
  --surface-1:       #1f1e26;   /* cards */
  --surface-2:       #24232d;   /* raised card, skeleton */
  --surface-3:       #2a2934;   /* raised control (secondary button) */
  --surface-4:       #32303c;   /* raised control, hover */
  --surface-overlay: #1c1b23;   /* menus, dialogs, toasts, tooltips */
  --engrave-fill:    rgba(255, 255, 255, 0.02); /* the almost clear fill of an engraved outline word (.page-mark) */
  --surface-sheet:   rgba(255, 255, 255, 0.018); /* a reading sheet just lighter than the page (news post article) */
  --surface-hover:   rgba(255, 255, 255, 0.04);
  --surface-active:  rgba(255, 255, 255, 0.07);
  --sunken:          rgba(0, 0, 0, 0.2);   /* inputs, wells */
  --scrim:           rgba(8, 8, 12, 0.62);  /* behind dialogs */
  /* Topbar: the bar's surface once scrolled (and the full-screen mobile
     menu): --bg at .86 under a blur; without backdrop-filter the opaque
     --bg (layout.css). --topbar-sheen: the top light of floating round
     controls (carousel arrows). */
  --topbar-bg:           rgba(25, 24, 31, 0.86);  /* --bg at .86 */
  --topbar-sheen:        inset 0 1px 0 rgba(255, 255, 255, 0.07);
  /* Round controls floating over content (carousel arrows, with blur);
     -accent is their hover: --accent-soft-hover laid over the same base. */
  --surface-float:        rgba(28, 27, 35, 0.78);
  --surface-float-accent: rgba(46, 37, 63, 0.86);

  /* Faint dot-grid texture — the deep floors only (hero, page top, CTA
     band, footer, standalone pages, media-kit previews). */
  --dot-grid:        radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  --dot-grid-size:   22px 22px;

  /* ── Lines (1px, white at low alpha) ──────────────────────────────────── */
  --line-subtle: rgba(255, 255, 255, 0.06);
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-hover:  rgba(255, 255, 255, 0.22);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-strong:   #f5f5f8;   /* headings, values */
  --text-1:        #e4e4ea;   /* body */
  --text-2:        #a2a3ae;   /* secondary — the lightest grey allowed for small text */
  --text-3:        #707180;   /* muted — ≥18px text, icons, decoration only (3.7:1 on --bg) */
  --text-disabled: #52535e;

  /* ── Accent: violet, the only accent ──────────────────────────────────── */
  --accent-300: #cbb0fb;
  --accent-400: #b691f8;   /* accent text (small text OK on every surface) */
  --accent-450: #ad80f6;   /* primary hover */
  --accent-500: #a472f5;   /* primary */
  --accent-text:       var(--accent-400);
  --accent-soft:       rgba(164, 114, 245, 0.12);
  --accent-soft-hover: rgba(164, 114, 245, 0.18);
  --accent-line:       rgba(164, 114, 245, 0.36);
  --on-accent:         #ffffff;
  --focus-ring:        0 0 0 3px rgba(164, 114, 245, 0.32);
  --focus-outline:     var(--accent-400);
  --selection:         rgba(164, 114, 245, 0.35);

  /* ── Status tones (chips, notices, toasts — never large fills) ────────── */
  --teal:         #5fb3c1;
  --teal-text:    #8ecfd9;
  --teal-soft:    rgba(95, 179, 193, 0.12);
  --teal-line:    rgba(95, 179, 193, 0.32);
  --success:      #4cbb8b;
  --success-text: #82d5b0;
  --success-soft: rgba(76, 187, 139, 0.12);
  --success-line: rgba(76, 187, 139, 0.32);
  --warning:      #dfa652;
  --warning-text: #ecc487;
  --warning-soft: rgba(223, 166, 82, 0.12);
  --warning-line: rgba(223, 166, 82, 0.32);
  --warning-glow: rgba(223, 166, 82, 0.45);   /* a warm glow under a warning tile (game-suggestions "in progress" card) */
  --danger:       #e06c6c;
  --danger-text:  #f0a4a4;
  --danger-soft:  rgba(224, 108, 108, 0.12);
  --danger-line:  rgba(224, 108, 108, 0.32);

  /* Discord brand — Discord buttons only. */
  --discord:       #5865f2;
  --discord-hover: #4752c4;

  /* Brand hues of the contact channels — only on hover of a channel tile
     (icon colour + a low-alpha tint), never at rest. */
  --brand-discord:        var(--discord);
  --brand-discord-soft:   rgba(88, 101, 242, 0.14);
  --brand-discord-line:   rgba(88, 101, 242, 0.42);
  --brand-youtube:        #ff0033;
  --brand-youtube-soft:   rgba(255, 0, 51, 0.12);
  --brand-youtube-line:   rgba(255, 0, 51, 0.38);
  --brand-instagram:      #e1306c;
  --brand-instagram-soft: rgba(225, 48, 108, 0.12);
  --brand-instagram-line: rgba(225, 48, 108, 0.38);
  --brand-tiktok:         #ffffff;
  --brand-tiktok-soft:    rgba(255, 255, 255, 0.08);
  --brand-tiktok-line:    rgba(255, 255, 255, 0.30);

  /* ── Categorical (news categories, avatar initials) ───────────────────── */
  --cat-blue:        #7ea6e0;
  --cat-blue-soft:   rgba(126, 166, 224, 0.12);
  --cat-blue-line:   rgba(126, 166, 224, 0.32);
  --cat-indigo:      #9a9cf0;
  --cat-indigo-soft: rgba(154, 156, 240, 0.12);
  --cat-indigo-line: rgba(154, 156, 240, 0.32);
  --cat-pink:        #e08fbf;
  --cat-pink-soft:   rgba(224, 143, 191, 0.12);
  --cat-pink-line:   rgba(224, 143, 191, 0.32);
  --cat-orange:      #e0a070;
  --cat-orange-soft: rgba(224, 160, 112, 0.12);
  --cat-orange-line: rgba(224, 160, 112, 0.32);

  /* ── Voice-line motif ─────────────────────────────────────────────────── */
  --voiceline-dim:  rgba(241, 240, 244, 0.14);
  --voiceline-lit:  var(--accent-400);
  --voiceline-core: var(--accent-300);   /* the faint light in the middle of a lit bar */

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-main: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-display: clamp(2.5rem, 5vw, 3.75rem);
  --fs-h1:      clamp(2.125rem, 4vw, 3rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:      1.25rem;
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md:      0 10px 28px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg:      0 24px 56px -16px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --highlight-top:  inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --highlight-btn:  inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --highlight-top-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-lift:    0 22px 44px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-xl:      0 50px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* Violet "underlight" under a floating surface (hero pieces, outro). */
  --underlight:     0 40px 120px -40px rgba(164, 114, 245, 0.35);
  /* The same, scaled to a small object (team portraits). */
  --underlight-sm:  0 18px 36px -12px rgba(164, 114, 245, 0.42);

  /* ── Ambient light ──────────────────────────────────────────────────────
     Large soft radial gradients behind hero visuals and at section seams.
     Pure gradients at low alpha (violet ≤ .16, warm white ≤ .06); never a
     section fill, never blurred, animated through opacity/transform only. */
  --ambient-violet:      rgba(164, 114, 245, 0.16);
  --ambient-violet-soft: rgba(164, 114, 245, 0.08);
  --ambient-warm:        rgba(255, 246, 236, 0.05);
  --spotlight:           rgba(164, 114, 245, 0.09);   /* cursor-follow highlight (.spotlight) */
  --horizon-core:        rgba(203, 176, 251, 0.55);   /* bright middle of a .horizon line */
  --cover-scrim:         rgba(13, 12, 17, 0.88);      /* bottom of image scrims */
  --cover-scrim-mid:     rgba(13, 12, 17, 0.45);      /* middle stop of image scrims */
  /* Faint light falling on the top of a raised surface (bento tiles, panels). */
  --sheen:               linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%);
  /* The soft light band that sweeps over a filled bar (.meter--sheen). */
  --sheen-sweep:         rgba(255, 255, 255, 0.34);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:      cubic-bezier(0.34, 1.56, 0.64, 1);   /* small overshoot: checks, badges */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);     /* LS.countUp's curve: meters that grow with a count */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  /* 1200px up to ~1845px viewports, then grows to 1600px on wide/4K screens
     so the layout (and the hero) keeps filling the screen. */
  --container:   clamp(1200px, 65vw, 1600px);
  --gutter:      24px;
  --section-y:   6rem;
  --grid-gap:    1.5rem;
  --nav-h:       4rem;
  /* The pinned header: the topbar plus, for an allow-listed visitor while
     maintenance is on, the open maintenance strip above it (main.js sets
     --maint-offset on <html> to the strip's height; 0 when folded or
     absent). Sticky elements and scroll offsets use --head-h; --nav-h
     stays the topbar alone (.under-topbar, hero paddings). */
  --maint-offset: 0px;
  --head-h:      calc(var(--nav-h) + var(--maint-offset));

  /* ── Spacing (4px grid) ───────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Z-index scale ─────────────────────────────────────────────────── */
  --z-dock:    990;
  --z-sticky:  1000;   /* topbar + its mobile panel */
  --z-skip:    1010;
  --z-cookie:  1060;
  --z-modal:   1080;
  --z-toast:   1090;
  --z-tooltip: 1100;
}

@media (max-width: 767px) {
  :root {
    --gutter:    16px;
    --section-y: 4rem;
    --grid-gap:  1rem;
  }
}