/*
 * Flox branding for floxtodon.dev
 *
 * Paste into Administration → Server settings → Appearance → Custom CSS.
 * This file is the source of truth; the copy in the database is what's served.
 *
 * Follows the Flox brand guidelines ("Sunrise & Sunset"):
 *   Eerie Black #1B1B1B + Pearl White as the base, Indigo #711AFF as the primary
 *   accent, Rose #FF4FAE secondary, Sunset gradient (Rose → Indigo) for CTAs,
 *   Geist / Geist Mono type (self-hosted under public/fonts/geist, OFL-1.1).
 *
 * Mastodon derives every brand color from its --color-indigo-* scale and every
 * dark surface from --color-grey-9xx, so overriding those palettes re-themes the
 * whole interface without touching individual components.
 */

@font-face {
  font-family: Geist;
  src: url('/fonts/geist/Geist-Variable.woff2?v=1') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist/GeistMono-Variable.woff2?v=1') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html:root {
  /* Flox Indigo scale, anchored on #711AFF at 700 (Mastodon's brand step) */
  --color-indigo-50: #f4edff;
  --color-indigo-100: #e8dbff;
  --color-indigo-200: #d2b8ff;
  --color-indigo-300: #b48aff;
  --color-indigo-400: #9659ff;
  --color-indigo-500: #8247ff;
  --color-indigo-600: #7b2bff;
  --color-indigo-700: #711aff;
  --color-indigo-800: #5a14cc;
  --color-indigo-900: #440f99;
  --color-indigo-950: #2a0961;

  /* Dark surfaces in Eerie Black */
  --color-grey-950: #1b1b1b;
  --color-grey-900: #232323;

  /* Typography */
  --font-body:
    'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;

  /* Flox gradients */
  --flox-sunset: linear-gradient(90deg, #ff4fae 0%, #711aff 100%);
  --flox-warm: linear-gradient(90deg, #ffd02b 0%, #ff7c32 100%);
}

/* Code and other technical text in Geist Mono */
code,
kbd,
pre,
samp,
.status__content code,
.status__content pre {
  font-family: 'Geist Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* Primary calls to action get the Sunset gradient */
.button:not(
  .button-secondary,
  .button-tertiary,
  .button--destructive,
  .button--dangerous,
  .button--plain,
  :disabled
) {
  background: var(--flox-sunset);
  border-color: transparent;
}

.button:not(
    .button-secondary,
    .button-tertiary,
    .button--destructive,
    .button--dangerous,
    .button--plain,
    :disabled
  ):hover,
.button:not(
    .button-secondary,
    .button-tertiary,
    .button--destructive,
    .button--dangerous,
    .button--plain,
    :disabled
  ):focus-visible {
  background: var(--flox-sunset);
  filter: brightness(1.08);
}

/* A thin Sunset accent along the top of the web app and admin pages */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--flox-sunset);
  z-index: 10000;
  pointer-events: none;
}

/*
 * Replace Mastodon's wordmark with the Flox "F" symbol + "floxtodon".
 * The symbol is a CSS mask filled with currentColor, so it is white on dark
 * themes and black on light themes, per the logo guidelines. The footer still
 * credits Mastodon ("Mastodon: About · View source code").
 */
a:has(> svg.logo--wordmark) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

a:has(> svg.logo--wordmark) > svg.logo--wordmark {
  display: none;
}

a:has(> svg.logo--wordmark)::before {
  content: '';
  flex: none;
  width: 21px;
  height: 28px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Crect y='30.002' width='9.99999' height='10'/%3E%3Crect x='10' y='20' width='20' height='10'/%3E%3Cpath d='M9.84374 0H30V10L9.99999 20H0V10L9.84374 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

a:has(> svg.logo--wordmark)::after {
  content: 'floxtodon';
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}