/* ============================================================
   FreeSpawn-Theme fuer Mastodon (passend zu freespawn.de, Flarum-Theme v9)

   Einspielen: scripts/deploy-theme.sh (setzt Setting custom_css).
   Schriften liegen unter data/fonts/ und werden als /freespawn-fonts/
   ausgeliefert (die CSP erlaubt Fonts nur von der eigenen Domain).

   Aufbau: Palette ueber die Farb-Token von Mastodon 4.7 (--color-*),
   nicht ueber Overrides pro Klasse. Dunkles Schema = Forum-Look,
   helles Schema bekommt nur die Akzentfarbe. Nach Mastodon-Updates
   pruefen, ob die Token-Namen noch stimmen.
   ============================================================ */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/freespawn-fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/freespawn-fonts/chakra-petch-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/freespawn-fonts/chakra-petch-700.woff2') format('woff2');
}

html:root {
  --fs-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
}

/* ---------- Dunkel: Palette wie im Forum ---------- */
html:root:not([data-color-scheme='light']) {
  /* Neutrale Flaechen (Forum: bg / Karten / Controls / Popups / Linien) */
  --color-grey-50: #f6f6f9;
  --color-grey-100: #f4f4f8;
  --color-grey-200: #dcdce6;
  --color-grey-300: #b9b9c9;
  --color-grey-400: #9a9ab0;
  --color-grey-500: #7b7b93;
  --color-grey-600: #5b5b72;
  --color-grey-700: #3b3b4d;
  --color-grey-800: #2c2c3a;
  --color-grey-900: #15151d;
  --color-grey-950: #0c0c11;

  /* Akzent: Orange statt Indigo. Text auf Orange ist dunkel (wie im Forum) */
  --color-text-brand: #ff8a33;
  --color-text-on-brand-base: #14100c;
  --color-text-brand-on-inverted: #b84400;
  --color-bg-brand-base: #ff6d00;
  --color-bg-brand-base-hover: #ff8a33;
  --color-bg-brand-soft: #5c2700;
  --color-bg-brand-softest: #2a1608;
  --color-border-brand-soft: #7a3400;
}

/* ---------- Hell: nur Akzentfarbe ---------- */
html:root[data-color-scheme='light'] {
  --color-text-brand: #b84400;
  --color-text-on-brand-base: #ffffff;
  --color-text-brand-on-inverted: #ff8a33;
  --color-bg-brand-base: #c24a00;
  --color-bg-brand-base-hover: #a33d00;
  --color-bg-brand-soft: #ffe6d1;
  --color-bg-brand-softest: #fff3e8;
  --color-border-brand-soft: #ffbf94;
}

/* ---------- Basis ---------- */
html:root body,
html:root button,
html:root input,
html:root select,
html:root textarea {
  font-family: var(--fs-font-body);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hintergrund wie im Forum: Glow oben + feine diagonale Streifen */
html:root:not([data-color-scheme='light']) body {
  background:
    radial-gradient(1100px 420px at 50% -8%, rgba(255, 109, 0, 0.10), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 109, 0, 0.018) 0, rgba(255, 109, 0, 0.018) 2px, transparent 2px, transparent 48px),
    var(--color-bg-primary);
  background-attachment: fixed;
}

/* Ueberschriften und Titel in der Display-Schrift */
h1, h2, h3,
.column-header__title,
.column-header__text,
.account__display-name strong,
.dashboard__quick-access strong,
.about__header h1,
.server-banner__introduction {
  font-family: var(--fs-font-display);
}
h1, h2, h3, .column-header__title { letter-spacing: 0.02em; }

/* Fokus wie im Forum */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-bg-brand-base);
  outline-offset: 2px;
}

/* ---------- Marke: Wortmarke statt Mastodon-Logo ---------- */
svg.logo--wordmark { display: none; }
a:has(> svg.logo--wordmark) {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--color-text-primary);
  font-family: var(--fs-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none;
}
a:has(> svg.logo--wordmark)::before {
  content: '';
  flex: none;
  width: 6px;
  height: 20px;
  margin-right: 9px;
  background: #ff6d00;
  transform: skewX(-18deg);
  box-shadow: 9px 0 0 rgba(255, 109, 0, 0.45);
}
a:has(> svg.logo--wordmark)::after { content: 'FreeSpawn'; }

/* Kompaktes Logo (Handy-Kopfleiste): Marke statt Mastodon-Symbol.
   Ohne Unterstuetzung fuer content:url() auf <img> bleibt das Original sichtbar. */
img.logo--icon {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 20'%3E%3Cpath fill='%23ff6d00' d='M7.25 0h6l-6.5 20h-6z'/%3E%3Cpath fill='%23ff6d00' fill-opacity='.45' d='M16.25 0h6l-6.5 20h-6z'/%3E%3C/svg%3E");
  object-fit: contain;
}