/* =====================================================================
   Unpresidented Brass Band — Mastodon custom CSS (social.ubbpdx.org)
   Built from the UBB style guide tokens (tokens.json v1) and Mastodon
   4.7's own theme tokens, so it re-skins the stock themes instead of
   fighting them. Paste into Administration → Server settings →
   Appearance → Custom CSS.
   ===================================================================== */

/* ---------- Fonts (self-hosted; see install note) ---------- */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/ubb-fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/ubb-fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/ubb-fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("/ubb-fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: swap; src: url("/ubb-fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Stardos Stencil"; font-weight: 700; font-style: normal; font-display: swap; src: url("/ubb-fonts/stardos-stencil-latin-700-normal.woff2") format("woff2"); }

body,
input, textarea, select, button,
.button,
.compose-form .autosuggest-textarea__textarea {
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* Stencil only for big display moments, per the guide (display-m and up, uppercase) */
.about__header h1,
.landing-page__logo,
.hero-widget__text .title,
.directory__card__bar .display-name strong {
  font-family: "Stardos Stencil", "Stencil Std", Stencil, Impact, serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Dark (default) ---------- */
[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  /* surfaces: style-guide surface / surface-raised / line */
  --color-bg-primary: #111813;
  --color-bg-secondary: #1a241d;
  --color-bg-tertiary: #233026;
  --color-bg-disabled: #2c3a30;
  --color-border-primary: #2c3a30;

  /* ink */
  --color-text-primary: #eef0e6;
  --color-text-secondary: #a7b0a3;
  --color-text-tertiary: #87907f;
  --color-text-disabled: #4f5c52;
  --color-text-on-disabled: #87907f;
  --color-text-inverted: #111813;

  /* band green = brand (links, buttons, active states) */
  --color-text-brand: #6fbf86;
  --color-bg-brand-base: #2b7040;
  --color-bg-brand-base-hover: #225d34;
  --color-text-on-brand-base: #fbfaf5;
  --color-bg-brand-soft: #1d3a26;
  --color-bg-brand-softest: #152a1c;
  --color-border-brand-soft: #2f5a3c;
  --color-text-brand-on-inverted: #225d34;

  /* brass = favourites/warnings; shako red = errors */
  --color-text-warning: #e3bd5c;
  --color-text-error: #e0605a;
  --color-bg-error-base: #a72223;
  --color-bg-error-base-hover: #8c1c1d;
  --color-border-error: #e0605a;
  --color-text-success: #6fbf86;
  --color-bg-success-base: #2b7040;
}

/* ---------- Light ---------- */
[data-color-scheme='light'] {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #fbfaf5;
  --color-bg-tertiary: #efeee6;
  --color-bg-disabled: #c9ccbf;
  --color-border-primary: #dcdfd3;

  --color-text-primary: #1b201b;
  --color-text-secondary: #5b6358;
  --color-text-tertiary: #6e766a;
  --color-text-disabled: #b4b8ab;
  --color-text-inverted: #fbfaf5;

  --color-text-brand: #225d34;
  --color-bg-brand-base: #225d34;
  --color-bg-brand-base-hover: #1b4a29;
  --color-text-on-brand-base: #fbfaf5;
  --color-bg-brand-soft: #dcebe0;
  --color-bg-brand-softest: #eef5f0;
  --color-border-brand-soft: #b9d4c1;
  --color-text-brand-on-inverted: #6fbf86;

  --color-text-warning: #8a6a1f;   /* brass-text: readable on light */
  --color-text-error: #a72223;
  --color-bg-error-base: #a72223;
  --color-bg-error-base-hover: #8c1c1d;
  --color-border-error: #a72223;
  --color-text-success: #225d34;
  --color-bg-success-base: #225d34;
}

/* ---------- Shape: the guide's rounded, soft look ---------- */
.button,
.compose-form__submit .button { border-radius: 999px; }
.media-gallery,
.media-gallery__item,
.video-player,
.audio-player,
.status-card,
.picture-in-picture-placeholder { border-radius: 14px; }

/* ---------- Brass accents ---------- */
/* favourited star in brass (instead of stock yellow) */
.icon-button.star-icon.active { color: #d4aa47; }

/* keyboard focus: 2px ring with a 2px gap, per the guide */
:focus-visible {
  outline: 2px solid var(--color-text-brand);
  outline-offset: 2px;
}

/* ---------- Hide stock Mastodon logo ---------- */
/* header (top right), nav panel, sign-in / admin pages */
svg.logo,
.logo--wordmark,
.logo--icon,
.ui__header__logo,
.navigation-panel__logo { display: none !important; }