MediaWiki:Tokens.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

:root {
    --red-50: #ffaca1;
    --red-100: #ffa197;
    --red-200: #ff8b83;
    --red-300: #ff766f;
    --red-400: #ff5f5c;
    --red-500: #fa4848;
    --red-600: #ce0922;
    --red-700: #a20000;
    --red-800: #760000;
    --red-900: #4a0000;
    --red-950: #290000;

    --rose-50: #ffbcc6;
    --rose-75: #FFB0A8;
    --rose-100: #ffb2bc;
    --rose-200: #ff9da9;
    --rose-300: #ff8995;
    --rose-400: #ff7582;
    --rose-500: #ea6170;
    --rose-600: #bf384d;
    --rose-700: #94002b;
    --rose-800: #6a000b;
    --rose-900: #400000;
    --rose-950: #200000;

    --pink-50: #ffbcf5;
    --pink-100: #ffb1eb;
    --pink-200: #ff9dd7;
    --pink-300: #ff89c3;
    --pink-400: #f875af;
    --pink-500: #e2629c;
    --pink-600: #b73a77;
    --pink-700: #8d0653;
    --pink-800: #630032;
    --pink-900: #3b0015;
    --pink-950: #1c0003;

    --fuchsia-50: #ffc1ff;
    --fuchsia-100: #ffb7ff;
    --fuchsia-200: #ffa3ff;
    --fuchsia-300: #f590ff;
    --fuchsia-400: #e17cf1;
    --fuchsia-500: #cd69dc;
    --fuchsia-600: #a441b3;
    --fuchsia-700: #7c128a;
    --fuchsia-800: #550064;
    --fuchsia-900: #30003f;
    --fuchsia-950: #150024;

    --purple-50: #ffd3ff;
    --purple-100: #fcc9ff;
    --purple-200: #e8b5ff;
    --purple-300: #d4a2ff;
    --purple-400: #c18ffc;
    --purple-500: #ae7ce8;
    --purple-600: #8855bd;
    --purple-700: #632f94;
    --purple-800: #41006d;
    --purple-900: #220047;
    --purple-950: #0e002c;

    --violet-50: #f1d8ff;
    --violet-100: #e6cdff;
    --violet-200: #d1b8ff;
    --violet-300: #bca2ff;
    --violet-400: #a88efd;
    --violet-500: #9479e7;
    --violet-600: #7154be;
    --violet-700: #513097;
    --violet-800: #330171;
    --violet-900: #1b004c;
    --violet-950: #0d0032;

    --indigo-50: #d5e4ff;
    --indigo-100: #cad8ff;
    --indigo-200: #b4c1ff;
    --indigo-300: #9eabff;
    --indigo-400: #8994f4;
    --indigo-500: #757fdc;
    --indigo-600: #555cb6;
    --indigo-700: #383990;
    --indigo-800: #1e166c;
    --indigo-900: #0d0049;
    --indigo-950: #08002f;

    --blue-50: #beefff;
    --blue-100: #b4e5ff;
    --blue-200: #a0d0ff;
    --blue-300: #8cbbff;
    --blue-400: #78a6f1;
    --blue-500: #6592db;
    --blue-600: #426db3;
    --blue-700: #21498c;
    --blue-800: #002766;
    --blue-900: #000242;
    --blue-950: #030028;

    --sky-50: #9dfbff;
    --sky-100: #94f2ff;
    --sky-200: #82dfff;
    --sky-300: #6fcdff;
    --sky-400: #5cbbf2;
    --sky-500: #49a9e0;
    --sky-600: #1380b5;
    --sky-700: #00598c;
    --sky-800: #003464;
    --sky-900: #00103e;
    --sky-950: #000024;

    --cyan-50: #92ffff;
    --cyan-100: #89faff;
    --cyan-200: #77e9ff;
    --cyan-300: #64d7f2;
    --cyan-400: #51c6e1;
    --cyan-500: #3db6d0;
    --cyan-600: #008ca5;
    --cyan-700: #00647c;
    --cyan-800: #003d55;
    --cyan-900: #001930;
    --cyan-950: #000216;

    --teal-50: #94fff6;
    --teal-100: #8bffed;
    --teal-200: #79eedc;
    --teal-300: #67ddcb;
    --teal-400: #54ccbb;
    --teal-500: #40bbaa;
    --teal-600: #009182;
    --teal-700: #00685b;
    --teal-800: #004237;
    --teal-900: #001f17;
    --teal-950: #000604;

    --emerald-50: #98ffd6;
    --emerald-100: #8fffcd;
    --emerald-200: #7df1bd;
    --emerald-300: #6be0ac;
    --emerald-400: #59ce9c;
    --emerald-500: #46be8c;
    --emerald-600: #009365;
    --emerald-700: #006b3f;
    --emerald-800: #00441c;
    --emerald-900: #002000;
    --emerald-950: #000700;

    --green-50: #a3ffb9;
    --green-100: #9bffb2;
    --green-200: #8bf4a2;
    --green-300: #7be493;
    --green-400: #6bd484;
    --green-500: #5bc576;
    --green-600: #28994c;
    --green-700: #006e23;
    --green-800: #004600;
    --green-900: #002100;
    --green-950: #000600;

    --lime-50: #c7ff82;
    --lime-100: #c1ff7b;
    --lime-200: #b4f66e;
    --lime-300: #a7e860;
    --lime-400: #9adb52;
    --lime-500: #8ece43;
    --lime-600: #629e00;
    --lime-700: #387100;
    --lime-800: #0e4700;
    --lime-900: #001f00;
    --lime-950: #000500;

    --yellow-50: #ffeb64;
    --yellow-100: #ffe55e;
    --yellow-200: #ffdb52;
    --yellow-300: #ffcf43;
    --yellow-400: #f2bb25;
    --yellow-500: #f2bb25;
    --yellow-600: #bf8a00;
    --yellow-700: #8f5b00;
    --yellow-800: #602f00;
    --yellow-900: #340200;
    --yellow-950: #130000;

    --amber-50: #ffdd68;
    --amber-100: #ffd660;
    --amber-200: #ffc951;
    --amber-300: #ffbc41;
    --amber-400: #ffaf2e;
    --amber-500: #f9a215;
    --amber-600: #c87400;
    --amber-700: #984700;
    --amber-800: #691900;
    --amber-900: #3c0000;
    --amber-950: #1a0000;

    --orange-50: #ffc77e;
    --orange-100: #ffbf76;
    --orange-200: #ffae65;
    --orange-300: #ff9e54;
    --orange-400: #ff8e42;
    --orange-500: #ff7d2e;
    --orange-600: #cf5200;
    --orange-700: #a02200;
    --orange-800: #720000;
    --orange-900: #450000;
    --orange-950: #220000;

    --red-muted-50: #d39e99;
    --red-muted-100: #c9948f;
    --red-muted-200: #b4817c;
    --red-muted-300: #a06e69;
    --red-muted-400: #8c5b57;
    --red-muted-500: #784a45;
    --red-muted-600: #542926;
    --red-muted-700: #320a09;
    --red-muted-800: #110000;
    --red-muted-900: #030000;
    --red-muted-950: #030000;

    --rose-muted-50: #cca1a2;
    --rose-muted-100: #c29899;
    --rose-muted-200: #ae8586;
    --rose-muted-300: #9b7274;
    --rose-muted-400: #886162;
    --rose-muted-500: #754f51;
    --rose-muted-600: #512e30;
    --rose-muted-700: #2f1013;
    --rose-muted-800: #0f0001;
    --rose-muted-900: #020000;
    --rose-muted-950: #020000;

    --pink-muted-50: #c9a1b0;
    --pink-muted-100: #bf97a6;
    --pink-muted-200: #ab8493;
    --pink-muted-300: #987280;
    --pink-muted-400: #85606e;
    --pink-muted-500: #724f5d;
    --pink-muted-600: #4e2e3b;
    --pink-muted-700: #2d101d;
    --pink-muted-800: #0d0004;
    --pink-muted-900: #010000;
    --pink-muted-950: #010000;

    --fuchsia-muted-50: #c0a2c4;
    --fuchsia-muted-100: #b699ba;
    --fuchsia-muted-200: #a387a7;
    --fuchsia-muted-300: #917595;
    --fuchsia-muted-400: #7f6483;
    --fuchsia-muted-500: #6d5371;
    --fuchsia-muted-600: #4a314d;
    --fuchsia-muted-700: #29122c;
    --fuchsia-muted-800: #0b000e;
    --fuchsia-muted-900: #010002;
    --fuchsia-muted-950: #010002;

    --purple-muted-50: #b4a7c7;
    --purple-muted-100: #ab9ebe;
    --purple-muted-200: #988bab;
    --purple-muted-300: #867998;
    --purple-muted-400: #756886;
    --purple-muted-500: #635774;
    --purple-muted-600: #413550;
    --purple-muted-700: #21162f;
    --purple-muted-800: #060010;
    --purple-muted-900: #010003;
    --purple-muted-950: #010003;

    --violet-muted-50: #ada8c9;
    --violet-muted-100: #a39ebf;
    --violet-muted-200: #8f8aaa;
    --violet-muted-300: #7b7695;
    --violet-muted-400: #686381;
    --violet-muted-500: #56506e;
    --violet-muted-600: #36314c;
    --violet-muted-700: #19132c;
    --violet-muted-800: #03000f;
    --violet-muted-900: #000003;
    --violet-muted-950: #000003;

    --indigo-muted-50: #a5abc7;
    --indigo-muted-100: #9aa0bc;
    --indigo-muted-200: #858aa6;
    --indigo-muted-300: #717691;
    --indigo-muted-400: #5d617b;
    --indigo-muted-500: #4a4e67;
    --indigo-muted-600: #2c2f47;
    --indigo-muted-700: #111328;
    --indigo-muted-800: #01010c;
    --indigo-muted-900: #000003;
    --indigo-muted-950: #000003;

    --blue-muted-50: #a0aec5;
    --blue-muted-100: #96a4ba;
    --blue-muted-200: #8391a6;
    --blue-muted-300: #707d93;
    --blue-muted-400: #5e6b7f;
    --blue-muted-500: #4c596d;
    --blue-muted-600: #2c384a;
    --blue-muted-700: #101a2a;
    --blue-muted-800: #00020d;
    --blue-muted-900: #000002;
    --blue-muted-950: #000002;

    --sky-muted-50: #9ab3c3;
    --sky-muted-100: #91aaba;
    --sky-muted-200: #8098a8;
    --sky-muted-300: #708797;
    --sky-muted-400: #607786;
    --sky-muted-500: #506776;
    --sky-muted-600: #2d4351;
    --sky-muted-700: #0d222e;
    --sky-muted-800: #00050f;
    --sky-muted-900: #000002;
    --sky-muted-950: #000002;

    --cyan-muted-50: #98b5bc;
    --cyan-muted-100: #90adb4;
    --cyan-muted-200: #819da4;
    --cyan-muted-300: #718d94;
    --cyan-muted-400: #627d84;
    --cyan-muted-500: #536e75;
    --cyan-muted-600: #2f494f;
    --cyan-muted-700: #0d262c;
    --cyan-muted-800: #00080d;
    --cyan-muted-900: #000001;
    --cyan-muted-950: #000001;

    --teal-muted-50: #99b6b1;
    --teal-muted-100: #91aea9;
    --teal-muted-200: #819e99;
    --teal-muted-300: #728e89;
    --teal-muted-400: #637f79;
    --teal-muted-500: #546f6a;
    --teal-muted-600: #304a45;
    --teal-muted-700: #0d2723;
    --teal-muted-800: #000906;
    --teal-muted-900: #000000;
    --teal-muted-950: #000000;

    --emerald-muted-50: #9ab7a8;
    --emerald-muted-100: #92afa0;
    --emerald-muted-200: #829f90;
    --emerald-muted-300: #738f80;
    --emerald-muted-400: #648071;
    --emerald-muted-500: #557062;
    --emerald-muted-600: #304b3e;
    --emerald-muted-700: #0e281c;
    --emerald-muted-800: #000903;
    --emerald-muted-900: #000000;
    --emerald-muted-950: #000000;

    --green-muted-50: #9db8a1;
    --green-muted-100: #95b199;
    --green-muted-200: #87a28b;
    --green-muted-300: #78937d;
    --green-muted-400: #6a856f;
    --green-muted-500: #5c7661;
    --green-muted-600: #374f3b;
    --green-muted-700: #142b19;
    --green-muted-800: #000b01;
    --green-muted-900: #000000;
    --green-muted-950: #000000;

    --lime-muted-50: #a5b995;
    --lime-muted-100: #9fb28f;
    --lime-muted-200: #93a683;
    --lime-muted-300: #879977;
    --lime-muted-400: #7b8d6b;
    --lime-muted-500: #6f8160;
    --lime-muted-600: #475737;
    --lime-muted-700: #213012;
    --lime-muted-800: #030d00;
    --lime-muted-900: #000000;
    --lime-muted-950: #000000;

    --yellow-muted-50: #c0b190;
    --yellow-muted-100: #bbac8b;
    --yellow-muted-200: #b1a281;
    --yellow-muted-300: #a69777;
    --yellow-muted-400: #938565;
    --yellow-muted-500: #938565;
    --yellow-muted-600: #66583a;
    --yellow-muted-700: #3c2f11;
    --yellow-muted-800: #160a00;
    --yellow-muted-900: #010000;
    --yellow-muted-950: #010000;

    --amber-muted-50: #c6ac8f;
    --amber-muted-100: #bfa689;
    --amber-muted-200: #b39a7d;
    --amber-muted-300: #a68d71;
    --amber-muted-400: #9a8166;
    --amber-muted-500: #8e765a;
    --amber-muted-600: #634c32;
    --amber-muted-700: #3a260c;
    --amber-muted-800: #160500;
    --amber-muted-900: #010000;
    --amber-muted-950: #010000;

    --orange-muted-50: #cda692;
    --orange-muted-100: #c59e8b;
    --orange-muted-200: #b58f7c;
    --orange-muted-300: #a5806d;
    --orange-muted-400: #96715f;
    --orange-muted-500: #866351;
    --orange-muted-600: #5e3d2c;
    --orange-muted-700: #381a0a;
    --orange-muted-800: #150000;
    --orange-muted-900: #020000;
    --orange-muted-950: #020000;

    --slate-50: oklch(98.3% 0.004 250.531);
    --slate-100: oklch(96.6% 0.005 250.458);
    --slate-200: oklch(92.9% 0.009 250.473);
    --slate-300: oklch(87.8% 0.014 250.368);
    --slate-400: oklch(71% 0.02 250.469);
    --slate-500: oklch(54.7% 0.026 251.453);
    --slate-600: oklch(44% 0.029 252.612);
    --slate-700: oklch(37.3% 0.028 256.119);
    --slate-800: oklch(26.9% 0.023 257.281);
    --slate-900: oklch(20.5% 0.018 261.692);
    --slate-950: oklch(13% 0.013 264.695);

    --gray-50: oklch(98.5% 0 0);
    --gray-100: oklch(96.9% 0 0);
    --gray-200: oklch(93.2% 0 0);
    --gray-300: oklch(88% 0 0);
    --gray-400: oklch(71.3% 0 0);
    --gray-500: oklch(55.1% 0 0);
    --gray-600: oklch(44.4% 0 0);
    --gray-700: oklch(37.6% 0 0);
    --gray-800: oklch(27.4% 0 0);
    --gray-900: oklch(21.1% 0 0);
    --gray-950: oklch(13.6% 0 0);

    --zinc-50: oklch(98.4% 0.002 247.858);
    --zinc-100: oklch(96.7% 0.004 247.896);
    --zinc-200: oklch(92.9% 0.007 247.896);
    --zinc-300: oklch(87.8% 0.011 264.364);
    --zinc-400: oklch(71% 0.015 265.756);
    --zinc-500: oklch(54.7% 0.018 256.803);
    --zinc-600: oklch(43.9% 0.02 256.788);
    --zinc-700: oklch(37.2% 0.019 259.733);
    --zinc-800: oklch(27.4% 0.014 265.754);
    --zinc-900: oklch(21% 0.01 280.358);
    --zinc-950: oklch(13.4% 0.008 285.885);

    --neutral-50: oklch(98.5% 0 0);
    --neutral-100: oklch(96.9% 0 0);
    --neutral-200: oklch(93.1% 0 0);
    --neutral-300: oklch(87.9% 0 0);
    --neutral-400: oklch(71.2% 0 0);
    --neutral-500: oklch(55% 0 0);
    --neutral-600: oklch(44.2% 0 0);
    --neutral-700: oklch(37.4% 0 0);
    --neutral-800: oklch(27.2% 0 0);
    --neutral-900: oklch(20.9% 0 0);
    --neutral-950: oklch(13.4% 0 0);

    --stone-50: oklch(98.4% 0.002 106.424);
    --stone-100: oklch(96.7% 0.004 106.424);
    --stone-200: oklch(93% 0.006 85.873);
    --stone-300: oklch(88% 0.008 96.018);
    --stone-400: oklch(71.2% 0.011 77.558);
    --stone-500: oklch(55.1% 0.013 81.301);
    --stone-600: oklch(44.2% 0.012 75.961);
    --stone-700: oklch(37.4% 0.01 67.558);
    --stone-800: oklch(27.3% 0.007 34.298);
    --stone-900: oklch(21.1% 0.006 56.043);
    --stone-950: oklch(14.7% 0.004 49.25);
    
	/* Glow effects */
	--glow-gold: 0 0 8px rgba(212, 168, 75, 0.4), 0 0 16px rgba(212, 168, 75, 0.2);
	--glow-gold-strong: 0 0 12px rgba(240, 200, 102, 0.6), 0 0 24px rgba(212, 168, 75, 0.3);
	--glow-red: 0 0 8px rgba(139, 45, 45, 0.4), 0 0 16px rgba(139, 45, 45, 0.2);
	
	/* ===== Game text colors - Base palette ===== */
	--color-outline: #1A1A1A;
	
	/* Grays & Neutrals */
	--color-white: #FFFFFF;
	--color-white-outline: #1A1A1A;
	--color-silver: #DAE0EA;
	--color-silver-outline: #151517;
	--color-cadet: #B3B9D1;
	--color-cadet-outline: #121316;
	
	/* Greens */
	--color-mint: #CDF7E2;
	--color-mint-outline: #131916;
	--color-aero: #CEFFEC;
	--color-aero-outline: #141A17;
	--color-jade: #92DCBA;
	--color-jade-outline: #091510;
	--color-shamrock: #56D191;
	--color-shamrock-outline: #06140C;
	--color-conifer: #9CDB43;
	--color-conifer-outline: #0B1501;
	--color-forest: #14A02E;
	--color-forest-outline: #010D03;
	--color-eucalyptus: #328464;
	--color-eucalyptus-outline: #030D08;
	
	/* Blues & Cyans */
	--color-sky: #9CDBF5;
	--color-sky-outline: #0B1519;
	--color-columbia: #A0DFFF;
	--color-columbia-outline: #0C1519;
	--color-malibu: #76C5EE;
	--color-malibu-outline: #081318;
	--color-picton: #249FDE;
	--color-picton-outline: #020D14;
	--color-wedgwood: #588DBE;
	--color-wedgwood-outline: #060C11;
	--color-prussian: #143464;
	--color-prussian-outline: #010408;
	--color-turquoise: #20D6C7;
	--color-turquoise-outline: #021514;
	
	/* Purples & Pinks */
	--color-pink: #EC8FD7;
	--color-pink-outline: #170914;
	--color-periwinkle: #B9BFFB;
	--color-periwinkle-outline: #111219;
	--color-thistle: #F1D4E8;
	--color-thistle-outline: #181418;
	--color-mulberry: #BC4A9B;
	--color-mulberry-outline: #12050E;
	--color-grape: #7F3EA1;
	--color-grape-outline: #09040D;
	--color-byzantium: #793A80;
	--color-byzantium-outline: #09040A;
	--color-orchid: #e879f9;
	
	/* Yellows & Golds */
	--color-gold: #FFE792;
	--color-gold-outline: #1A1609;
	--color-cream: #FEF3C0;
	--color-cream-outline: #1A1811;
	--color-cornsilk: #FFFAE3;
	--color-cornsilk-outline: #1A1916;
	--color-sunglow: #FFD541;
	--color-sunglow-outline: #1A1404;
	--color-mustard: #FFE65A;
	--color-mustard-outline: #1A1706;
	--color-flax: #E9D569;
	--color-flax-outline: #171407;
	
	/* Oranges & Reds */
	--color-coral: #F5A097;
	--color-coral-outline: #190C0C;
	--color-roman: #E86A73;
	--color-roman-outline: #17070A;
	--color-bittersweet: #F3705B;
	--color-bittersweet-outline: #180906;
	--color-pumpkin: #FA6A0A;
	--color-pumpkin-outline: #190901;
	--color-cinnabar: #DF3E23;
	--color-cinnabar-outline: #160502;
	
	/* Browns & Tans */
	--color-desert: #E9B5A3;
	--color-desert-outline: #17100D;
	--color-mongoose: #C7B08B;
	--color-mongoose-outline: #14110B;
	--color-bordeaux: #572638;
	--color-bordeaux-outline: #070304;
	--color-mistyrose: #FFDFDA;
	--color-mistyrose-outline: #1A1615;
	
	/* Teals & Aquas */
	--color-aquamarine: #A6FCDB;
	--color-aquamarine-outline: #0D1A15;
	--color-casper: #B9D2E0;
	--color-casper-outline: #111518;
	
	/* ===== Game semantic aliases ===== */
	/* Items */
	--color-common-item: var(--color-silver);
	--color-common-item-outline: var(--color-silver-outline);
	--color-uncommon-item: var(--color-mint);
	--color-uncommon-item-outline: var(--color-mint-outline);
	--color-rare-item: var(--color-sky);
	--color-rare-item-outline: var(--color-sky-outline);
	--color-epic-item: var(--color-pink);
	--color-epic-item-outline: var(--color-pink-outline);
	--color-legendary-item: var(--color-gold);
	--color-legendary-item-outline: var(--color-gold-outline);
	--color-item-default: var(--color-silver);
	--color-item-default-outline: var(--color-silver-outline);
	--color-item-description: var(--color-jade);
	--color-item-description-outline: var(--color-jade-outline);
	--color-item-title: var(--color-sunglow);
	--color-item-title-outline: var(--color-sunglow-outline);
	--color-item-important: var(--color-columbia);
	--color-item-important-outline: var(--color-columbia-outline);
	--color-item-high-stat: var(--color-conifer);
	--color-item-high-stat-outline: var(--color-conifer-outline);
	--color-item-low-stat: var(--color-coral);
	--color-item-low-stat-outline: var(--color-coral-outline);
	
	/* Damage types */
	--color-fire-hit: var(--color-pumpkin);
	--color-fire-hit-outline: var(--color-pumpkin-outline);
	--color-water-hit: var(--color-turquoise);
	--color-water-hit-outline: var(--color-turquoise-outline);
	--color-earth-hit: var(--color-desert);
	--color-earth-hit-outline: var(--color-desert-outline);
	--color-energy-hit: var(--color-periwinkle);
	--color-energy-hit-outline: var(--color-periwinkle-outline);
	--color-holy-hit: var(--color-cream);
	--color-holy-hit-outline: var(--color-cream-outline);
	--color-death-hit: var(--color-byzantium);
	--color-death-hit-outline: var(--color-byzantium-outline);
	--color-poison-hit: var(--color-forest);
	--color-poison-hit-outline: var(--color-forest-outline);
	--color-magic-hit: var(--color-mulberry);
	--color-magic-hit-outline: var(--color-mulberry-outline);
	--color-magic-damage: var(--color-grape);
	--color-magic-damage-outline: var(--color-grape-outline);
	
	/* Blood types */
	--color-red-blood: var(--color-cinnabar);
	--color-red-blood-outline: var(--color-cinnabar-outline);
	--color-blue-blood: var(--color-wedgwood);
	--color-blue-blood-outline: var(--color-wedgwood-outline);
	--color-green-blood: var(--color-eucalyptus);
	--color-green-blood-outline: var(--color-eucalyptus-outline);
	--color-dark-blood: var(--color-bordeaux);
	--color-dark-blood-outline: var(--color-bordeaux-outline);
	--color-white-blood: var(--color-cadet);
	--color-white-blood-outline: var(--color-cadet-outline);
	--color-rock-blood: var(--color-mongoose);
	--color-rock-blood-outline: var(--color-mongoose-outline);
	
	/* Spells */
	--color-basic-spell: var(--color-roman);
	--color-basic-spell-outline: var(--color-roman-outline);
	--color-offensive-spell: var(--color-bittersweet);
	--color-offensive-spell-outline: var(--color-bittersweet-outline);
	--color-defensive-spell: var(--color-flax);
	--color-defensive-spell-outline: var(--color-flax-outline);
	--color-support-spell: var(--color-malibu);
	--color-support-spell-outline: var(--color-malibu-outline);
	
	/* Health & Mana */
	--color-healing: var(--color-conifer);
	--color-healing-outline: var(--color-conifer-outline);
	--color-mana-heal: var(--color-picton);
	--color-mana-heal-outline: var(--color-picton-outline);
	--color-mana-damage: var(--color-prussian);
	--color-mana-damage-outline: var(--color-prussian-outline);
	--color-npc-health: var(--color-shamrock);
	--color-npc-health-outline: var(--color-shamrock-outline);
	--color-diamond-skin: var(--color-aquamarine);
	--color-diamond-skin-outline: var(--color-aquamarine-outline);
	
	/* Chat & Text */
	--color-speak-text: var(--color-mustard);
	--color-speak-text-outline: var(--color-mustard-outline);
	--color-npc-text: var(--color-aero);
	--color-npc-text-outline: var(--color-aero-outline);
	--color-private-text: var(--color-casper);
	--color-private-text-outline: var(--color-casper-outline);
	--color-global-text: var(--color-thistle);
	--color-global-text-outline: var(--color-thistle-outline);
	--color-event-text: var(--color-cadet);
	--color-event-text-outline: var(--color-cadet-outline);
	--color-warning-text: var(--color-cinnabar);
	--color-warning-text-outline: var(--color-cinnabar-outline);
	--color-monster-speak: var(--color-pumpkin);
	--color-monster-speak-outline: var(--color-pumpkin-outline);
	--color-sign-color: var(--color-mistyrose);
	--color-sign-color-outline: var(--color-mistyrose-outline);
	
	/* Misc */
	--color-experience: var(--color-cornsilk);
	--color-experience-outline: var(--color-cornsilk-outline);
}

/* ===== Base color classes ===== */
.color-white { color: var(--color-white); --color-outline: var(--color-white-outline); }
.color-silver { color: var(--color-silver); --color-outline: var(--color-silver-outline); }
.color-cadet { color: var(--color-cadet); --color-outline: var(--color-cadet-outline); }
.color-mint { color: var(--color-mint); --color-outline: var(--color-mint-outline); }
.color-aero { color: var(--color-aero); --color-outline: var(--color-aero-outline); }
.color-jade { color: var(--color-jade); --color-outline: var(--color-jade-outline); }
.color-shamrock { color: var(--color-shamrock); --color-outline: var(--color-shamrock-outline); }
.color-conifer { color: var(--color-conifer); --color-outline: var(--color-conifer-outline); }
.color-forest { color: var(--color-forest); --color-outline: var(--color-forest-outline); }
.color-eucalyptus { color: var(--color-eucalyptus); --color-outline: var(--color-eucalyptus-outline); }
.color-sky { color: var(--color-sky); --color-outline: var(--color-sky-outline); }
.color-columbia { color: var(--color-columbia); --color-outline: var(--color-columbia-outline); }
.color-malibu { color: var(--color-malibu); --color-outline: var(--color-malibu-outline); }
.color-picton { color: var(--color-picton); --color-outline: var(--color-picton-outline); }
.color-wedgwood { color: var(--color-wedgwood); --color-outline: var(--color-wedgwood-outline); }
.color-prussian { color: var(--color-prussian); --color-outline: var(--color-prussian-outline); }
.color-turquoise { color: var(--color-turquoise); --color-outline: var(--color-turquoise-outline); }
.color-pink { color: var(--color-pink); --color-outline: var(--color-pink-outline); }
.color-periwinkle { color: var(--color-periwinkle); --color-outline: var(--color-periwinkle-outline); }
.color-thistle { color: var(--color-thistle); --color-outline: var(--color-thistle-outline); }
.color-mulberry { color: var(--color-mulberry); --color-outline: var(--color-mulberry-outline); }
.color-grape { color: var(--color-grape); --color-outline: var(--color-grape-outline); }
.color-byzantium { color: var(--color-byzantium); --color-outline: var(--color-byzantium-outline); }
.color-gold { color: var(--color-gold); --color-outline: var(--color-gold-outline); }
.color-cream { color: var(--color-cream); --color-outline: var(--color-cream-outline); }
.color-cornsilk { color: var(--color-cornsilk); --color-outline: var(--color-cornsilk-outline); }
.color-sunglow { color: var(--color-sunglow); --color-outline: var(--color-sunglow-outline); }
.color-mustard { color: var(--color-mustard); --color-outline: var(--color-mustard-outline); }
.color-flax { color: var(--color-flax); --color-outline: var(--color-flax-outline); }
.color-coral { color: var(--color-coral); --color-outline: var(--color-coral-outline); }
.color-roman { color: var(--color-roman); --color-outline: var(--color-roman-outline); }
.color-bittersweet { color: var(--color-bittersweet); --color-outline: var(--color-bittersweet-outline); }
.color-pumpkin { color: var(--color-pumpkin); --color-outline: var(--color-pumpkin-outline); }
.color-cinnabar { color: var(--color-cinnabar); --color-outline: var(--color-cinnabar-outline); }
.color-desert { color: var(--color-desert); --color-outline: var(--color-desert-outline); }
.color-mongoose { color: var(--color-mongoose); --color-outline: var(--color-mongoose-outline); }
.color-bordeaux { color: var(--color-bordeaux); --color-outline: var(--color-bordeaux-outline); }
.color-mistyrose { color: var(--color-mistyrose); --color-outline: var(--color-mistyrose-outline); }
.color-aquamarine { color: var(--color-aquamarine); --color-outline: var(--color-aquamarine-outline); }
.color-casper { color: var(--color-casper); --color-outline: var(--color-casper-outline); }
.color-orchid { color: var(--color-orchid); }
.color-peachy-salmon { color: var(--rose-75); }