/**
 * @name Warhawk Division
 * @author Warhawk Division
 * @description Discord in the colors of warhawkdivision.com: olive drab, brass, and sand, with the site's Oswald headings.
 * @version 1.0.1
 * @invite warhawk
 * @website https://warhawkdivision.com
 * @source https://warhawkdivision.com/betterdiscord/WarhawkDivision.theme.css
 */

/* Fonts from the site: Oswald for headings, Inter for text. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap");

/* The site's dark palette (src/config/site.ts, theme.dark). Change these to retune everything. */
:root {
  --wh-bg: oklch(0.17 0.008 120);
  --wh-card: oklch(0.205 0.01 120);
  --wh-muted: oklch(0.25 0.012 120);
  --wh-accent: oklch(0.3 0.03 125);
  --wh-secondary: oklch(0.33 0.045 130);
  --wh-deep: oklch(0.14 0.008 120);
  --wh-text: oklch(0.93 0.02 90);
  --wh-text-muted: oklch(0.74 0.02 100);
  --wh-brass: oklch(0.8 0.1 88);
  --wh-on-brass: oklch(0.17 0.008 120);
  --wh-red: oklch(0.7 0.19 25);
  --wh-green: oklch(0.74 0.15 150);
  --wh-yellow: oklch(0.8 0.15 85);
  --wh-border: oklch(1 0 0 / 12%);
  --wh-hover: oklch(1 0 0 / 5%);
  --wh-selected: oklch(0.8 0.1 88 / 14%);
}

.theme-dark,
.theme-darker,
.theme-midnight,
.visual-refresh.theme-dark {
  /* Surfaces: chat, channel list, server list, menus. */
  --background-primary: var(--wh-bg);
  --background-secondary: var(--wh-card);
  --background-secondary-alt: var(--wh-muted);
  --background-tertiary: var(--wh-deep);
  --background-floating: var(--wh-card);
  --background-nested-floating: var(--wh-muted);
  --background-accent: var(--wh-secondary);
  --background-mobile-primary: var(--wh-bg);
  --background-mobile-secondary: var(--wh-card);
  --background-message-hover: var(--wh-hover);
  --background-modifier-hover: var(--wh-hover);
  --background-modifier-active: var(--wh-selected);
  --background-modifier-selected: var(--wh-selected);
  --background-modifier-accent: var(--wh-border);
  --background-base-lowest: var(--wh-deep);
  --background-base-lower: var(--wh-bg);
  --background-base-low: var(--wh-card);
  --background-surface-high: var(--wh-card);
  --background-surface-higher: var(--wh-muted);
  --background-surface-highest: var(--wh-accent);
  --bg-base-primary: var(--wh-bg);
  --bg-base-secondary: var(--wh-card);
  --bg-base-tertiary: var(--wh-deep);
  --bg-surface-raised: var(--wh-card);
  --bg-surface-overlay: var(--wh-card);
  --bg-mod-subtle: var(--wh-hover);
  --bg-mod-strong: var(--wh-selected);
  --modal-background: var(--wh-card);
  --modal-footer-background: var(--wh-muted);
  --channeltextarea-background: var(--wh-muted);
  --input-background: var(--wh-muted);
  --chat-background: var(--wh-bg);
  --chat-border: var(--wh-border);
  --border-faint: var(--wh-border);
  --border-subtle: var(--wh-border);
  --border-strong: oklch(1 0 0 / 20%);

  /* Text. */
  --text-normal: var(--wh-text);
  --text-default: var(--wh-text);
  --text-strong: var(--wh-text);
  --text-muted: var(--wh-text-muted);
  --text-secondary: var(--wh-text-muted);
  --text-link: var(--wh-brass);
  --text-brand: var(--wh-brass);
  --text-positive: var(--wh-green);
  --text-warning: var(--wh-yellow);
  --text-danger: var(--wh-red);
  --header-primary: var(--wh-text);
  --header-secondary: var(--wh-text-muted);
  --channels-default: var(--wh-text-muted);
  --channel-icon: var(--wh-text-muted);
  --interactive-normal: var(--wh-text-muted);
  --interactive-hover: var(--wh-text);
  --interactive-active: var(--wh-brass);
  --interactive-muted: oklch(0.74 0.02 100 / 45%);

  /* Brand: Discord's blurple becomes the site's brass. */
  --brand-experiment: var(--wh-brass);
  --brand-experiment-560: oklch(0.72 0.1 88);
  --brand-experiment-600: oklch(0.66 0.1 88);
  --brand-500: var(--wh-brass);
  --brand-560: oklch(0.72 0.1 88);
  --button-filled-brand-background: var(--wh-brass);
  --button-filled-brand-background-hover: oklch(0.72 0.1 88);
  --button-filled-brand-background-active: oklch(0.66 0.1 88);
  --button-filled-brand-text: var(--wh-on-brass);
  --mention-foreground: var(--wh-brass);
  --mention-background: oklch(0.8 0.1 88 / 18%);
  --info-positive-foreground: var(--wh-green);
  --info-warning-foreground: var(--wh-yellow);
  --info-danger-foreground: var(--wh-red);
  --status-danger: var(--wh-red);
  --status-positive: var(--wh-green);
  --status-warning: var(--wh-yellow);
  --focus-primary: var(--wh-brass);

  /* Scrollbars. */
  --scrollbar-thin-thumb: var(--wh-secondary);
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: var(--wh-secondary);
  --scrollbar-auto-track: var(--wh-deep);

  /* The site's square corners. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
}

/* Fonts. */
:root {
  --font-primary: "Inter", "gg sans", "Noto Sans", sans-serif;
  --font-display: "Oswald", "gg sans", sans-serif;
  --font-headline: "Oswald", "gg sans", sans-serif;
}

/* Headings in the site's style: Oswald, upper case, a little spacing. Not on channel or category
   rows: Discord sizes its channel list from fixed row heights, and Oswald's taller lines pushed the
   last channels past the end of the scroll. */
[class*="title_"][class*="container_"] h1,
h1[class*="defaultColor_"],
h2[class*="defaultColor_"],
[class*="name_"][class*="header_"] {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

[class*="header_"] h2,
[class*="title_"] h1 {
  text-transform: uppercase;
}

/* Channel rows keep Discord's own line height, whatever the font, so every channel stays reachable. */
[class*="containerDefault_"] [class*="name_"] {
  line-height: 20px;
}

/* Brass bar on the selected channel, like the site's active links. */
[class*="containerDefault_"] [class*="modeSelected_"] {
  box-shadow: inset 2px 0 0 var(--wh-brass);
}