/* HNT.ROCKS · HNTv3 design tokens (14.10.2026)
   Verbindliche Werte aus der vorhandenen HTML-Referenz, KEINE neuen Farben.
   Reine Deklarationen: Werte/Rendering bestehender Komponenten bleiben gleich.
   Alias-Namen unterstützen var(--black), var(--accent), var(--title) usw.
   Bestehende Legacy-Tokens (--bg, --text, --hnt-accent etc.) bewusst nicht überschreiben.
*/
:root{
  /* Grundfarben */
  --hnt-color-black:#0d0d0d;
  /* Same full-page canvas for every authenticated HNTv3 page: the Feed. */
  --hnt-page-background:radial-gradient(ellipse 83% 77% at 53% 23%, #181818 0%, #141414 42%, var(--black) 78%, #090909 100%);
  --hnt-color-post:#262626;
  --hnt-color-widget:#252725;
  --hnt-color-accent:#a7d0a8;
  --hnt-color-logo-accent:#83c994;
  --hnt-color-logo-text:#e7ebe6;
  --hnt-color-accent-soft:#a7d0ae;
  --hnt-color-accent-ink:#17251b;
  --hnt-color-title:#f4f5f4;
  --hnt-color-body-text:#dce1dc;
  --hnt-color-subtle-text:#9e9f9e;
  --hnt-color-global-text:#f2f2f2;
  --hnt-color-white:#fff;

  /* Neutrale Flächen (keine überlappenden ähnlichen Farben vereinheitlichen) */
  --hnt-color-surface-neutral:#292929;
  --hnt-color-surface-deep:#202020;
  --hnt-color-surface-raised:#2e2e2e;
  --hnt-color-surface-input:#232523;
  --hnt-color-surface-control:#373a37;
  --hnt-color-surface-nav:#1c1c1c;

  /* Interaktion / Status */
  --hnt-color-control-border:#525952;
  --hnt-color-control-fg:#c4cac4;
  --hnt-color-control-hover:#4b3534;
  --hnt-color-control-hover-fg:#ebc0bd;
  --hnt-color-filter-active:#38443b;
  --hnt-color-filter-text:#c3ebcd;
  --hnt-color-focus:#a9d4b0;
  --hnt-color-panel-border:#444844;
  --hnt-color-dialog-bg:#282d29;
  --hnt-color-dialog-border:#4a5850;

  /* Kurze, lesbare Aliase für Komponenten. */
  --black:var(--hnt-color-black);
  --post:var(--hnt-color-post);
  --widget:var(--hnt-color-widget);
  --accent:var(--hnt-color-accent);
  --logo-accent:var(--hnt-color-logo-accent);
  --logo-text:var(--hnt-color-logo-text);
  --accent-soft:var(--hnt-color-accent-soft);
  --accent-ink:var(--hnt-color-accent-ink);
  --title:var(--hnt-color-title);
  --body-text:var(--hnt-color-body-text);
  --subtle-text:var(--hnt-color-subtle-text);
  --base-text:var(--hnt-color-global-text);
  --white:var(--hnt-color-white);
  --surface-neutral:var(--hnt-color-surface-neutral);
  --surface-deep:var(--hnt-color-surface-deep);
  --surface-raised:var(--hnt-color-surface-raised);
  --surface-input:var(--hnt-color-surface-input);
  --surface-control:var(--hnt-color-surface-control);
  --surface-nav:var(--hnt-color-surface-nav);
  --control-border:var(--hnt-color-control-border);
  --control-fg:var(--hnt-color-control-fg);
  --control-hover-bg:var(--hnt-color-control-hover);
  --control-hover-fg:var(--hnt-color-control-hover-fg);
  --filter-selected-bg:var(--hnt-color-filter-active);
  --filter-selected-fg:var(--hnt-color-filter-text);
  --focus-ring:var(--hnt-color-focus);
  --panel-border:var(--hnt-color-panel-border);
  --dialog-bg:var(--hnt-color-dialog-bg);
  --dialog-border:var(--hnt-color-dialog-border);

  /* Formen + Bewegung: exakt die HNTv3-Referenz. */
  /* Spatial rhythm measured from the HNTv3 feed: widget stack 12, posts 13, section headings 8. */
  --hnt-space-widget-gap:12px;
  --hnt-space-post-stack:13px;
  --hnt-space-widget-inset:15px;
  --hnt-space-kicker-gap:8px;
  --hnt-radius-post:15px;
  --hnt-radius-widget:14px;
  --hnt-radius-dialog:16px;
  --hnt-radius-close:9px;
  --hnt-size-close:33px;
  --hnt-motion-close:background .2s ease,color .2s ease,transform .2s ease;
  --hnt-motion-modal-overlay:opacity .25s ease,visibility .25s ease;
  --hnt-motion-modal-panel:transform .35s cubic-bezier(.16,.8,.21,1);
}

/*
 * HNTv3 CANONICAL BREADCRUMB – measured in index.html (Feed).
 * Single source for all app-page breadcrumbs, including auto-generated previews.
 * Keep page headings and page-specific layout intact: this only unifies the crumb itself.
 *
 * Feed reference at 1754px: y=112; mobile 390px: y=162.
 * Color #88b695, font 9px / 600, tracking 1.3px, gap 8px,
 * bottom margin 8px, normal line-height.
 * The !important declarations deliberately win over legacy per-page overrides
 * (e.g. Teams, Rocks, Ready Lobbies, News Details and Guides Details).
 */
:root {
  --hnt-breadcrumb-ink: #88b695;
  --hnt-breadcrumb-font-size: 9px;
  --hnt-breadcrumb-font-weight: 600;
  --hnt-breadcrumb-tracking: 1.3px;
  --hnt-breadcrumb-gap: 8px;
  --hnt-breadcrumb-bottom: 8px;
}
.feed-kicker {
  display: flex !important;
  align-items: center !important;
  color: var(--hnt-breadcrumb-ink) !important;
  font-size: var(--hnt-breadcrumb-font-size) !important;
  font-weight: var(--hnt-breadcrumb-font-weight) !important;
  letter-spacing: var(--hnt-breadcrumb-tracking) !important;
  gap: var(--hnt-breadcrumb-gap) !important;
  margin-top: 0 !important;
  margin-bottom: var(--hnt-breadcrumb-bottom) !important;
  line-height: normal !important;
}
/* The standalone Moment Studio uses its own compact app header. Match
   breadcrumb typography there without moving or unhiding its mobile UI. */
.he-heading > small {
  color: var(--hnt-breadcrumb-ink) !important;
  font-size: var(--hnt-breadcrumb-font-size) !important;
  font-weight: var(--hnt-breadcrumb-font-weight) !important;
  letter-spacing: var(--hnt-breadcrumb-tracking) !important;
}