/*
 * Client UI theme colors: use these variables instead of hard-coded colors in new or edited UI.
 * The base of the UI is the dark grey textures (png/bg.png, png/bg2.png, png/bg3.png) with white text.
 * See "Client UI theme" in AGENTS.md.
 */
:root {
  /* Accent (gold): selected tabs, focused inputs, selected list entries and highlighted borders */
  --color-accent: #e6c35c;

  /* Glow around accent elements (box-shadow) */
  --color-accent-glow: rgba(230, 195, 92, 0.6);

  /* Faint accent light on large surfaces (e.g., the banner gradients of the game menu) */
  --color-accent-haze: rgba(230, 195, 92, 0.22);

  /* Soft accent text: secondary highlights such as spell words */
  --color-accent-text: #f5e08a;

  /* Dark background of the selected accent element (e.g., a selected tab) */
  --color-accent-dark: #5a5340;

  /* Bottom of the selected accent gradient and dark text on accent backgrounds (e.g., the Premium tag) */
  --color-accent-darker: #2e2a1f;

  /* Raised surface of buttons, tabs and list entries (gradient from top to bottom), lighter when hovered */
  --color-surface-top: #4a4a4a;
  --color-surface-bottom: #262626;
  --color-surface-hover-top: #575757;
  --color-surface-hover-bottom: #2f2f2f;

  /* Static cards that are not clicked (e.g., the PvP counters, the game menu banners): darker than the raised surface */
  --color-card-top: #3c3c3c;
  --color-card-bottom: #1f1f1f;

  /* Light grey surface of selected buttons (gradient from top to bottom) */
  --color-surface-light-top: #6e6e6e;
  --color-surface-light-bottom: #4a4a4a;

  /* Light details of UI icon artwork (e.g., the game menu tiles) next to the accent */
  --color-icon-light: #dcdcdc;

  /* Secondary text on the dark surfaces, from light to dim: soft for descriptions and secondary names,
     muted for hints, placeholders and counters, dim for empty or disabled values */
  --color-text-soft: #cccccc;
  --color-text-muted: #aaaaaa;
  --color-text-dim: #8a8a8a;

  /* Floating panels above the interface (item tooltips and item cards): dark background with a light border */
  --color-panel-background: #1c1c1c;
  --color-panel-border: #4a4a4a;

  /* Error text: why an input cannot be used (e.g., a key that is already taken) */
  --color-error: #ff6b6b;

  /* Danger (blood red): unjustified kills and the red skull warnings, like the accent with a glow, haze and dark background */
  --color-danger: #ff4a3a;
  --color-danger-glow: rgba(255, 50, 30, 0.55);
  --color-danger-haze: rgba(220, 30, 20, 0.22);
  --color-danger-dark: #5a2420;
  --color-danger-darker: #2e1412;

  /* Warning (amber): one unjustified kill away from a red skull */
  --color-warning: #ff9f2e;

  /* Success (green): finished actions, e.g., the check of "Mark as Solved" in the Reports channel */
  --color-success: #6fcf6f;
  /* Dark background of a selected green element, e.g., the selected Full Defense button */
  --color-success-dark: #24452a;

  /* Health and mana bar fills (gradient from top to bottom) */
  --color-health-top: #e05a4f;
  --color-health-bottom: #8e1c16;
  --color-mana-top: #4f8fe0;
  --color-mana-bottom: #1a3f8e;

  /* Border of the battle list entry of the attacked and of the followed creature (classic client colors) */
  --color-battle-target: #ff0000;
  --color-battle-follow: #00ff00;

  /* Two-click actions (e.g., kick a party member, clear a loot list, mark a report as solved) while waiting for the second click */
  --color-confirming: var(--color-warning);

  /* Scrollbars of the interface: the thumb on a dark track */
  --color-scrollbar-thumb: #5a5a5a;
  --color-scrollbar-track: #1a1a1a;

  /* Skill progress bars of the Stats window (gradient from top to bottom); the experience bar uses the accent */
  --color-skill-bar-top: #5fc65f;
  --color-skill-bar-bottom: #2e7d32;

  /* Item names in loot messages by rarity ("rarity" in the item definitions); the message itself is white like common items */
  --color-rarity-common: #ffffff;
  --color-rarity-uncommon: #00ff00;
  --color-rarity-rare: #5aa9ff;
  --color-rarity-epic: #c27bff;
  --color-rarity-legendary: #ff9f2e;

  /* Party shields next to the name plates and battle list names: leader, member, invitation and the shared experience plus */
  --color-party-leader: #f2c230;
  --color-party-member: #3f86f0;
  --color-party-invitation: #ffffff;
  --color-party-shared: #ffffff;
  --color-party-outline: #000000;

  /* PvP skulls are frames of the sprite sheet png/skulls.png (see screen-element.css). The sheet has no black skull:
     it is the darkened white skull with this red aura */
  --color-skull-black-glow: rgba(255, 30, 0, 0.85);

  /* Own skull in the status bar: the dark frame and background of the 18x18 status icons (png/status/*.svg) */
  --color-status-icon-frame: #140c08;
  --color-status-icon-background: #2a2420;

  /* Hotbar slot key labels by content: text, object and empty slot (spells keep white) */
  --color-hotbar-key-text: #add8e6;
  --color-hotbar-key-object: #ffd27f;
  --color-hotbar-key-empty: #808080;

  /* Icons of the friend list chosen in Edit Friend (FriendWindow.ICONS), drawn before the friend name */
  --color-friend-icon-heart: #ff4a6e;
  --color-friend-icon-skull: #ff4a3a;
  --color-friend-icon-bolt: #f5e08a;
  --color-friend-icon-target: #ff9f2e;
  --color-friend-icon-star: #e6c35c;
  --color-friend-icon-money: #6fcf6f;
  --color-friend-icon-shield: #5aa9ff;
  --color-friend-icon-cross: #ffffff;
  --color-friend-icon-triangle: #c27bff;
  --color-friend-icon-moon: #add8e6;

  /*
   * Shared looks built from the colors above: every button, tab and list entry uses these instead of its own copy
   *
   * --gradient-surface: normal raised surface, --gradient-surface-hover: hovered, --gradient-accent: selected or highlighted,
   * --gradient-card: static card, --gradient-danger: destructive buttons and options
   * --shadow-raised: light top edge and drop shadow of a raised surface, --shadow-accent: the same with the accent glow
   * --shadow-header: faint light top and left edge of a title bar (window headers), inside its black left and bottom borders
   */
  --gradient-surface: linear-gradient(to bottom, var(--color-surface-top), var(--color-surface-bottom));
  --gradient-surface-hover: linear-gradient(to bottom, var(--color-surface-hover-top), var(--color-surface-hover-bottom));
  --gradient-surface-light: linear-gradient(to bottom, var(--color-surface-light-top), var(--color-surface-light-bottom));
  --gradient-accent: linear-gradient(to bottom, var(--color-accent-dark), var(--color-accent-darker));
  --gradient-card: linear-gradient(to bottom, var(--color-card-top), var(--color-card-bottom));
  --gradient-danger: linear-gradient(to bottom, var(--color-danger-dark), var(--color-danger-darker));
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 4px var(--color-accent-glow);
  --shadow-header: inset 1px 1px 0 rgba(255, 255, 255, 0.12);
}