/* Zombie Nation Redux palette.
   This is the only file that sets colors. Change a custom property here
   and the whole site follows. Do not add color values anywhere else.

   Brand colors are the approved set:
   Dark OD #33402C, accent #465538, grey #5B5F5C,
   mustard #C9A227, rust #9B2D20, background #16181A.
*/

:root {
  /* Brand */
  --od: #33402c;
  --od-accent: #465538;
  --grey: #5b5f5c;
  --yellow: #c9a227;
  --rust: #9b2d20;
  --bg: #16181a;

  /* Brand, nudged for hover states */
  --grey-hover: #6d716e;
  --yellow-hover: #d4b34a;
  --rust-hover: #b03828;

  /* Status pills: online green, offline rust, rebooting mustard */
  --status-online: #7eaa55;
  --status-online-text: #16181a;
  --status-offline: #9b2d20;
  --status-offline-text: #f4efe8;
  --status-rebooting: #c9a227;
  --status-rebooting-text: #1a1208;

  /* Surfaces and type */
  --sidebar: #121415;
  --card: rgb(28 31 33 / 0.92);
  --border: #34383a;
  --text: #f4efe8;
  --muted: #b3a69a;
  --ink: #1a1208;
  --on-rust: #f4efe8;
  --bar-track: #2a2d2f;
  --input-bg: #101214;
  --menu-hover: #22261f;
  --chip-bg: rgb(0 0 0 / 0.28);
  --banner-bg: rgb(201 162 39 / 0.14);
  --alert-bg: rgb(155 45 32 / 0.28);
  --alert-text: #f0c2b8;
  --ok-bg: rgb(126 170 85 / 0.16);
  --overlay: rgb(0 0 0 / 0.55);
  --clear: transparent;
  --selection: #c9a227;

  --scrim: linear-gradient(rgb(22 24 26 / 0.5), rgb(22 24 26 / 0.78));
  --shadow: 0 10px 28px rgb(0 0 0 / 0.28);
  --topbar-grunge: repeating-linear-gradient(
    45deg,
    rgb(0 0 0 / 0.08) 0 2px,
    transparent 2px 6px
  );

  /* Donate buttons. Dark OD and accent, a coral or blue tint, mustard glow. */
  --donate-patreon-fill: linear-gradient(165deg, #3d4c34 0%, #33402c 58%, #6a4038 100%);
  --donate-paypal-fill: linear-gradient(165deg, #3e5140 0%, #465538 52%, #2c4558 100%);
  --donate-ink: #f4efe8;
  --donate-ring: #c9a227;
  --donate-shine: linear-gradient(
    105deg,
    rgb(201 162 39 / 0) 0%,
    rgb(244 239 232 / 0.05) 38%,
    rgb(255 244 214 / 0.78) 50%,
    rgb(201 162 39 / 0.2) 62%,
    rgb(201 162 39 / 0) 100%
  );
  --donate-glow: 0 16px 30px rgb(201 162 39 / 0.48), 0 0 22px rgb(201 162 39 / 0.4);
  --donate-shadow: 0 8px 16px rgb(0 0 0 / 0.32);

  --grunge-opacity: 0.14;
  --grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}