/* Feuerstein auf Stahl - Farbwelt firestrike.de auf Mastodon 4.7.1
   Quelle: _uebergabe/gestaltung-firestrike.tokens.json, Stand 2026-09-02.
   Gesetzt ueber Einstellung custom_css. Ruecknahme: Setting custom_css leeren.
   Rollen statt Farbnamen: nicht "orange", sondern "glut". */

/* ---------- 1. Grundwerte, unabhaengig von hell/dunkel ---------- */

html {
  --fs-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fs-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Nur Systemschriften. Inter und Syne werden dadurch nicht mehr benutzt. */
  --font-body: var(--fs-sans);
  --font-heading: var(--fs-serif);
  --font-monospace: var(--fs-mono);

  /* Zeilenhoehe Fliesstext 1,65 / Ueberschrift 1,2 */
  --lh-normal: 1.65;
  --lh-tight: 1.2;
  --lh-tighter: 1.2;

  /* Eckenradius 0 - Kanten bleiben Kanten */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-round: 0;
  --avatar-border-radius: 0;

  /* Grundton-Leiter neu belegt, damit auch nicht einzeln ueberschriebene
     Stellen (z.B. hoher Kontrast) in der Farbwelt landen. */
  --color-grey-50:  #F6F7F4;
  --color-grey-100: #EFF0ED;
  --color-grey-200: #E3E5E1;
  --color-grey-300: #C9CCC6;
  --color-grey-400: #A5ADA6;
  --color-grey-500: #7E8A80;
  --color-grey-600: #5A605B;
  --color-grey-700: #454B47;
  --color-grey-800: #38403A;
  --color-grey-900: #262B27;
  --color-grey-950: #141715;

  /* Markenleiter (bei Mastodon "indigo") auf den EINEN warmen Akzent:
     Funke und Glut sind zwei Toene derselben Idee. */
  --color-indigo-50:  #FBF2E7;
  --color-indigo-100: #F6E6CF;
  --color-indigo-200: #EFD0A6;
  --color-indigo-300: #F2B558;
  --color-indigo-400: #E8A33D;
  --color-indigo-500: #D9713C;
  --color-indigo-600: #C25C24;
  --color-indigo-700: #AB5019;
  --color-indigo-800: #8A3F13;
  --color-indigo-900: #5C2A0D;
  --color-indigo-950: #331705;

  --color-highlight: #A5ADA6;
  --color-outline: #212B33;
  --color-shadow: #141715;

  /* Rot, Gelb, Gruen bleiben unangetastet: Zustandsfarben sind
     ausdruecklich nicht Teil dieser Palette. */
}

/* ---------- 2. Helle Darstellung ---------- */

[data-color-scheme="light"] {
  --fs-grund: #EFF0ED;
  --fs-flaeche: #FFFFFF;
  --fs-flaeche-tief: #E3E5E1;
  --fs-linie: #C9CCC6;
  --fs-text: #1B1E1C;
  --fs-text-leise: #5A605B;
  --fs-stahl: #33414B;
  --fs-stahl-tief: #212B33;
  --fs-funke: #E8A33D;
  --fs-glut: #AB5019;
  --fs-fokus: #AB5019;
  --fs-auf-stahl: #FFFFFF;

  --color-text-primary: var(--fs-text);
  --color-text-secondary: var(--fs-text-leise);
  --color-text-tertiary: var(--fs-text-leise);
  --color-text-inverted: var(--fs-grund);
  --color-text-brand: var(--fs-glut);
  --color-text-brand-on-inverted: #D9713C;
  --color-text-status-links: var(--fs-glut);
  --color-text-on-brand-base: var(--fs-auf-stahl);
  --color-text-disabled: #A5ADA6;
  --color-text-on-disabled: var(--fs-grund);

  --color-bg-primary: var(--fs-flaeche);
  --color-bg-secondary: var(--fs-grund);
  --color-bg-tertiary: var(--fs-flaeche-tief);
  --color-bg-inverted: var(--fs-text);
  --color-bg-disabled: var(--fs-linie);
  --color-bg-brand-base: var(--fs-stahl);
  --color-bg-brand-base-hover: #26313A;
  --color-bg-brand-soft: #DDE2E6;
  --color-bg-brand-softest: #EEF1F3;

  --color-border-primary: var(--fs-linie);
  --color-border-strong: var(--fs-text);
  --color-border-brand: var(--fs-stahl);
  --color-border-brand-soft: #B7C0C7;

  --focus-outline-color: var(--fs-fokus);
  --outline-focus-default: 2px solid var(--fs-fokus);
}

/* ---------- 3. Dunkle Darstellung (auch ohne Skript) ---------- */

[data-color-scheme="dark"],
html:not([data-color-scheme]) {
  --fs-grund: #141715;
  --fs-flaeche: #1C201D;
  --fs-flaeche-tief: #262B27;
  --fs-linie: #38403A;
  --fs-text: #E8EBE7;
  --fs-text-leise: #A5ADA6;
  --fs-stahl: #7E93A1;
  --fs-stahl-tief: #B4C6D1;
  --fs-funke: #F2B558;
  --fs-glut: #D9713C;
  --fs-fokus: #F2B558;
  --fs-auf-stahl: #141715;

  --color-text-primary: var(--fs-text);
  --color-text-secondary: var(--fs-text-leise);
  --color-text-tertiary: var(--fs-text-leise);
  --color-text-inverted: var(--fs-grund);
  --color-text-brand: var(--fs-glut);
  --color-text-brand-on-inverted: #AB5019;
  --color-text-status-links: var(--fs-glut);
  --color-text-on-brand-base: var(--fs-auf-stahl);
  --color-text-disabled: #5A605B;
  --color-text-on-disabled: var(--fs-text-leise);

  --color-bg-primary: var(--fs-grund);
  --color-bg-secondary: var(--fs-flaeche);
  --color-bg-tertiary: var(--fs-flaeche-tief);
  --color-bg-inverted: var(--fs-text);
  --color-bg-disabled: var(--fs-linie);
  --color-bg-brand-base: var(--fs-stahl);
  --color-bg-brand-base-hover: #93A6B3;
  --color-bg-brand-soft: #2A343B;
  --color-bg-brand-softest: #1E262C;

  --color-border-primary: var(--fs-linie);
  --color-border-strong: var(--fs-text);
  --color-border-brand: var(--fs-stahl);
  --color-border-brand-soft: #46545E;

  --focus-outline-color: var(--fs-fokus);
  --outline-focus-default: 2px solid var(--fs-fokus);
}

/* ---------- 4. Eckenradius ueberall auf 0 ---------- */

*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* ---------- 5. Schriften ---------- */

body,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--fs-sans);
}

h1, h2, h3, h4, h5, h6,
.logo--wordmark,
.column-header__title,
.about__header__hero + h1 {
  font-family: var(--fs-serif);
  font-weight: 600;
  line-height: 1.2;
}

code, pre, kbd, samp, .input-copy input[type="text"] {
  font-family: var(--fs-mono);
}

pre, code {
  background-color: var(--fs-flaeche-tief);
}

/* ---------- 6. Wortmarke traegt stahl-tief (Textrolle) ---------- */

.logo,
.logo--icon,
.logo--wordmark {
  color: var(--fs-stahl-tief);
}

/* ---------- 7. Tastaturfokus: 2px durchgezogen, 2px Abstand, Rolle fokus ---------- */

:focus-visible {
  outline: 2px solid var(--fs-fokus);
  outline-offset: 2px;
}

/* ---------- 8. Verweise sind unterstrichen, nicht nur farbig ---------- */

.status__content a,
.edit-indicator__content a,
.reply-indicator__content a,
.account__header__content a,
.public-account-bio a,
.prose a,
.rich-formatting a,
.link-footer a {
  --text-decoration-default: underline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}