/*
 * Trinity-Design für Towelie (Landingpage, Dashboard, Rechtstexte)
 * Überschreibt die Juxt-Farbwerte mit der Palette von Trinity Host: dunkel, flach, Gold als Akzent, Systemschrift.
 * Wird nach juxt/tokens.css, juxt/style.css und den Seitenstilen geladen (zuletzt im <head>).
 */

:root,
.light,
[data-theme='light'],
.dark,
[data-theme='dark'] {
  color-scheme: dark;

  --juxt-bg: #0f0f10;
  --juxt-surface: #1a1a1c;
  --juxt-surface-raised: #1a1a1c;
  --juxt-surface-sunken: #141415;
  --juxt-surface-hover: #202023;
  --juxt-surface-active: #2a2a2e;
  --juxt-overlay: rgb(0 0 0 / 0.65);

  --juxt-border: #2a2a2e;
  --juxt-border-subtle: #222225;
  --juxt-border-strong: #38383d;

  --juxt-fg: #ececee;
  --juxt-fg-secondary: #b4b4bb;
  --juxt-fg-muted: #9a9aa2;
  --juxt-fg-disabled: #5c5c63;

  /* Hauptaktionen: Gold mit dunkler Schrift */
  --juxt-ink: #e8a317;
  --juxt-ink-hover: #f5b936;
  --juxt-ink-fg: #1a1200;

  --juxt-accent: #e8a317;
  --juxt-accent-hover: #f5b936;
  --juxt-accent-fg: #1a1200;
  --juxt-accent-strong: #c98a0f;
  --juxt-accent-text: #f0b53a;
  --juxt-accent-soft: rgb(232 163 23 / 0.12);
  --juxt-accent-border: rgb(232 163 23 / 0.32);
  --juxt-ring: rgb(232 163 23 / 0.55);
  --juxt-ring-soft: rgb(232 163 23 / 0.2);

  --juxt-danger: #d6453b;
  --juxt-danger-hover: #c53a31;
  --juxt-danger-fg: #ffffff;
  --juxt-danger-text: #ee7b72;
  --juxt-danger-soft: rgb(229 100 90 / 0.14);
  --juxt-danger-border: rgb(238 123 114 / 0.3);
  --juxt-danger-ring: rgb(229 100 90 / 0.24);

  --juxt-warning: #e8a317;
  --juxt-warning-text: #f0b53a;
  --juxt-warning-soft: rgb(232 163 23 / 0.12);
  --juxt-warning-border: rgb(232 163 23 / 0.3);

  --juxt-info: #5b92f0;
  --juxt-info-text: #8fb3f5;
  --juxt-info-soft: rgb(91 146 240 / 0.13);
  --juxt-info-border: rgb(143 179 245 / 0.28);

  /* Erfolg bleibt grün, damit "ok" und "Akzent" unterscheidbar sind */
  --juxt-success: #3fa86a;
  --juxt-success-text: #6fd195;
  --juxt-success-soft: rgb(79 191 122 / 0.12);
  --juxt-success-border: rgb(111 209 149 / 0.3);

  /* flach: kaum Schatten */
  --juxt-shadow-xs: none;
  --juxt-shadow-sm: none;
  --juxt-shadow-md: 0 8px 22px -8px rgb(0 0 0 / 0.55);
  --juxt-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.65);
  --juxt-control-highlight: none;

  --juxt-tooltip-bg: #202023;
  --juxt-tooltip-fg: #ececee;
  --juxt-tooltip-border: #38383d;

  --juxt-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --juxt-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --juxt-radius-md: 8px;
  --juxt-radius-lg: 8px;

  /* Dashboard-Variablen */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 8px;
}

body {
  font-family: var(--juxt-font-sans) !important;
  font-feature-settings: normal !important;
  background: var(--juxt-bg);
}

/* Es gibt nur noch das dunkle Trinity-Design, den Umschalter brauchen wir nicht */
.theme-btn,
.theme-toggle { display: none !important; }

/* Landingpage: Raster und Leuchten im Hintergrund weg, die Figur schwebt nicht mehr */
.hero::before { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.hero-art .halo { display: none !important; }
.hero-art img { animation: none !important; filter: none !important; }

/* Topbar wie bei Trinity: einfarbig, ohne Unschärfe */
.topbar { background: var(--juxt-bg) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--juxt-border) !important; }
.topbar .wrap { height: 72px !important; }
.brand { font-size: 18px !important; font-weight: 700 !important; }
.brand img { width: 36px !important; height: 36px !important; }
.nav-links a { font-weight: 500; }

/* Überschriften und Karten */
.eyebrow { text-transform: uppercase; letter-spacing: .1em !important; font-size: 12px !important; }
.hero h1,
h2.title { letter-spacing: -0.02em !important; font-weight: 700 !important; }
.stats { background: var(--juxt-bg2, #141415) !important; }
.feat, .j-card, .price-card, .plan, .faq details { border-radius: 8px; }
.feat:hover { transform: none !important; box-shadow: none !important; border-color: var(--juxt-border-strong) !important; }

/* Hauptbutton: Gold */
.j-button--primary,
.btn-discord.j-button--primary { background: var(--juxt-ink); color: var(--juxt-ink-fg); border-color: var(--juxt-ink); font-weight: 600; }
.j-button--primary:hover { background: var(--juxt-ink-hover); border-color: var(--juxt-ink-hover); }

::selection { background: rgb(232 163 23 / 0.35); }

/* Links, die wie Buttons aussehen, ohne Unterstreichung */
a[class*="j-button"], .login-card a, .btn-login, .guild-invite-btn { text-decoration: none !important; }

/* Navigation wie bei Trinity Host: Marke mit Zusatzzeile, Menüpunkte mit Icons */
.brand { gap: 12px !important; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt small { margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--juxt-fg-muted); }
.nav-links { gap: 30px !important; margin-left: 28px !important; }
.nav-links a { padding: 6px 0 !important; border-radius: 0 !important; background: none !important; color: var(--juxt-fg-muted) !important; font-size: 15px !important; font-weight: 500; }
.nav-links a:hover { color: var(--juxt-fg) !important; background: none !important; }
.nav-links a i { margin-right: 8px; font-size: 13px; opacity: .8; }
.brand-sub { letter-spacing: .06em; text-transform: uppercase; font-size: 10px !important; }
@media (max-width: 800px) { .brand-txt small { display: none; } }

/* Discord-Button in der Navbar wie bei Trinity Host */
.nav-dc { background: #5865f2 !important; border: 1px solid #5865f2 !important; color: #fff !important; font-weight: 600; }
.nav-dc:hover { background: #4752c4 !important; border-color: #4752c4 !important; color: #fff !important; }
.nav-dc i { margin-right: 6px; }
@media (max-width: 800px) { .nav-dc span { display: none; } .nav-dc i { margin: 0; } }