/* FFF Skin Tool — Color System
 * Dark-first. Deep navy canvas, electric crystal-cyan primary, gold for premium/legendary,
 * violet + azure as rarity/secondary accents, chrome-silver text. Restrained on purpose:
 * one hero accent (crystal), gold reserved for premium, no neon overload.
 */
:root{
  /* ——— Ink / surfaces (deep navy blacks) ——— */
  --ink-950:#05070F;
  --ink-900:#0A0E1B;
  --ink-850:#10162A;
  --ink-800:#161E38;
  --ink-700:#1E2947;
  --ink-600:#2A3862;
  --ink-500:#3A4B78;

  /* ——— Crystal (primary accent — the cyan from the logo crystal) ——— */
  --crystal-300:#8FF0FF;
  --crystal-400:#4FE3FF;
  --crystal-500:#1FCDF5;
  --crystal-600:#0FA6D4;
  --crystal-700:#0B7EA3;

  /* ——— Azure (royal blue) ——— */
  --azure-400:#4C86FF;
  --azure-500:#2B63F5;
  --azure-600:#1D48C9;

  /* ——— Violet (epic rarity / secondary) ——— */
  --violet-400:#A97DFF;
  --violet-500:#8A5CFF;
  --violet-600:#6C3FE0;

  /* ——— Gold (premium / legendary) ——— */
  --gold-300:#FFE59B;
  --gold-400:#FFD264;
  --gold-500:#F5B833;
  --gold-600:#D4941A;

  /* ——— Chrome / neutral text ——— */
  --chrome-100:#EEF3FF;
  --chrome-300:#C3CEE3;
  --chrome-500:#A4B2D0;
  --chrome-700:#647291;

  /* ——— Hairlines ——— */
  --line:rgba(255,255,255,0.07);
  --line-strong:rgba(255,255,255,0.13);
  --line-crystal:rgba(31,205,245,0.35);

  /* ——— Semantic ——— */
  --success:#33E0A0;
  --warning:#FFB43D;
  --danger:#FF5C77;
  --info:var(--crystal-500);

  /* ——— Rarity ladder (skins, pets, loot) ——— */
  --rarity-common:#7C8AA8;
  --rarity-rare:#3B82F6;
  --rarity-epic:#8A5CFF;
  --rarity-legendary:#F5B833;
  --rarity-mythic:#1FCDF5;

  /* ——— Gradients ——— */
  --grad-crystal:linear-gradient(135deg,#4FE3FF 0%,#2B63F5 100%); /* @kind color */
  --grad-premium:linear-gradient(135deg,#FFE59B 0%,#F5B833 55%,#D4941A 100%); /* @kind color */
  --grad-mythic:linear-gradient(135deg,#8FF0FF 0%,#8A5CFF 100%); /* @kind color */
  --grad-surface:linear-gradient(180deg,#161E38 0%,#10162A 100%); /* @kind color */
  --grad-glow:radial-gradient(120% 120% at 50% 0%,rgba(31,205,245,0.18) 0%,rgba(31,205,245,0) 60%); /* @kind color */

  /* ——— Semantic aliases ——— */
  --bg-canvas:var(--ink-950);
  --surface-1:var(--ink-850);
  --surface-2:var(--ink-800);
  --surface-3:var(--ink-700);
  --border:var(--line);
  --border-strong:var(--line-strong);

  --brand:var(--crystal-500);
  --brand-hover:var(--crystal-400);
  --brand-active:var(--crystal-600);
  --on-brand:#04121A;
  --accent-premium:var(--gold-500);
  --on-premium:#1A1203;

  --text-primary:var(--chrome-100);
  --text-secondary:var(--chrome-500);
  --text-tertiary:var(--chrome-700);
  --text-brand:var(--crystal-400);
  --text-premium:var(--gold-400);
}