/* Mèo colour theme. The art (art/meo-cat.svg) tags every shape with c-* role classes; this file maps
   the roles to custom properties. Re-colour the cat here, never in the SVG. The collar and the star
   tag follow the brand colours sent by the hub (hello.brand). */

.meo-cat {
  --meo-fur: #FFFFFF;
  --meo-fur-shade: #ECE9F4;
  --meo-line: #2E2836;
  --meo-line-soft: #8A8296;
  --meo-brow: #5B5066;
  --meo-whisker: #2E2836;
  --meo-ear: #FFB6CB;
  --meo-nose: #FF8DAE;
  --meo-nose-line: #D45C83;
  --meo-blush: #FF8FB3;
  --meo-blush-line: #F0607F;
  --meo-sclera: #FFFFFF;
  --meo-sclera-shade: #C6D3EC;
  --meo-iris-1: #BDE9FF;
  --meo-iris-2: #55A4F5;
  --meo-iris-3: #2B64C6;
  --meo-iris-4: #1A3C8C;
  --meo-iris-ring: #17377C;
  --meo-iris-fiber: #A9DCFF;
  --meo-pupil: #141320;
  --meo-glint: #FFFFFF;
  --meo-mouth: #7C2236;
  --meo-tongue: #FF7D9C;
  --meo-tongue-line: #D9577A;
  --meo-tooth: #FFFFFF;
  --meo-bean: #FFA3BE;
  --meo-bow: #FF7FB2;
  --meo-bow-dark: #E0508F;
  --meo-bow-dot: #FFE0EE;
  --meo-collar: var(--brand-primary, #DA251D);
  --meo-collar-dark: #A8170F;
  --meo-collar-hi: #FF7468;
  --meo-tag: var(--brand-accent, #FFCD00);
  --meo-tag-ring: #C79300;
  --meo-tag-hi: #FFF3B0;
  --meo-tear: #8FD3FF;
  --meo-tear-line: #4FA6E8;
  --meo-sweat: #A8DCFF;
  --meo-sweat-line: #5AAAE6;
  --meo-heart: #FF4F7E;
  --meo-heart-line: #C92A57;
  --meo-sparkle: #FFCD00;
  --meo-shades-1: #3A3A52;
  --meo-shades-2: #0F0F17;
  --meo-anger: #E53935;
  --meo-gloom: #7480DD;
  --meo-zzz: #7480DD;
  --meo-mark-q: #5A6BD8;
  --meo-mark-ex: var(--brand-primary, #DA251D);
  --meo-ripple: var(--brand-primary, #DA251D);
  --meo-bubble: #FFFFFF;
  --meo-fish: #FF9E7A;
  --meo-eyeshadow: #E9A5D2;
  --meo-eyeshadow-deep: #C77DC0;
  --meo-mark: #5B5066;
  --meo-ground: #281E3C;
  /* Mèo Tôm's costume (art/meo-tom.svg); unused by Mèo */
  --meo-trousers: #262B3B;
  --meo-shoe: #15171F;
  --meo-shoe-hi: #4A4F66;
  --meo-muzzle: #FFFFFF;
  --meo-coat: #1E2230;
  --meo-coat-hi: #3A4156;
  --meo-lapel: #2C3244;
  --meo-shirt: #FFFFFF;
  --meo-button: #1E2230;
  --meo-bowtie: #1B1E2A;
  --meo-bowtie-hi: #4A5068;
  --meo-glove: #FFFFFF;
  --meo-glove-shade: #E3E7EF;
  --meo-badge: #FFFFFF;
  --meo-brand-text: var(--brand-primary, #DA251D);
  --meo-star: var(--brand-accent, #FFCD00);
}

/* Night palette while sleeping (after office hours). */
.meo-cat[data-state="sleep"] {
  --meo-fur: #E3E7F5;
  --meo-fur-shade: #C9CFE5;
  --meo-line: #2A2F4F;
  --meo-line-soft: #7D85A8;
  --meo-brow: #4E5478;
  --meo-whisker: #2A2F4F;
  --meo-ear: #E2B2C8;
  --meo-nose: #E59AB6;
  --meo-nose-line: #B66C8C;
  --meo-blush: #E59AB6;
  --meo-bow: #E48CB4;
  --meo-bow-dark: #C26493;
  --meo-bow-dot: #F4D9E6;
  --meo-collar: #B5342D;
  --meo-collar-dark: #86231D;
  --meo-collar-hi: #D2625B;
  --meo-tag: #DDB52C;
  --meo-tag-ring: #A88515;
  --meo-tag-hi: #F1DD8E;
  --meo-bean: #DE9FB8;
  --meo-zzz: #CBD3FF;
}

/* Grey palette while disconnected. */
.meo-cat[data-state="offline"] {
  --meo-fur: #F4F4F6;
  --meo-fur-shade: #E1E1E6;
  --meo-line: #5D5A66;
  --meo-line-soft: #A3A0AA;
  --meo-brow: #7D7A85;
  --meo-whisker: #5D5A66;
  --meo-ear: #DAD3D7;
  --meo-nose: #CBC0C5;
  --meo-nose-line: #A8999F;
  --meo-iris-1: #E2E6EA;
  --meo-iris-2: #AEB6BF;
  --meo-iris-3: #8B939C;
  --meo-iris-4: #6F7780;
  --meo-iris-ring: #5F6670;
  --meo-iris-fiber: #D7DCE1;
  --meo-pupil: #3C3B42;
  --meo-sclera-shade: #DADDE3;
  --meo-mouth: #6E6A72;
  --meo-tongue: #C9C1C5;
  --meo-bean: #DCD3D7;
  --meo-bow: #D4CDD1;
  --meo-bow-dark: #B9B0B5;
  --meo-bow-dot: #EEEAEC;
  --meo-collar: #A9A6AC;
  --meo-collar-dark: #8B888F;
  --meo-collar-hi: #C7C4CA;
  --meo-tag: #D6D2C6;
  --meo-tag-ring: #ABA79B;
  --meo-tag-hi: #EEECE5;
}

/* Mèo Tôm, the male host (art/meo-tom.svg, D35): blue-grey gentleman in a tailcoat. Placed after Mèo's
   night and offline palettes so his own colours win; his night and offline palettes follow. */
.meo-cat.meo-tom {
  --meo-fur: #8D9BB5;
  --meo-fur-shade: #74829D;
  --meo-muzzle: #F3F5FA;
  --meo-line: #232634;
  --meo-line-soft: #7E8699;
  --meo-brow: #2E3244;
  --meo-whisker: #2E3244;
  --meo-ear: #E6A9BA;
  --meo-nose: #4A4F66;
  --meo-nose-line: #2E3244;
  --meo-blush: #FF9DB3;
  --meo-sclera-shade: #CFD8E6;
  --meo-iris-1: #F4FFC2;
  --meo-iris-2: #BFD94E;
  --meo-iris-3: #74A027;
  --meo-iris-4: #3E6014;
  --meo-iris-ring: #2F4A10;
  --meo-iris-fiber: #EAF8B4;
  --meo-pupil: #15161F;
  --meo-mouth: #6B2233;
}

.meo-cat.meo-tom[data-state="sleep"] {
  --meo-fur: #76829E;
  --meo-fur-shade: #626E89;
  --meo-muzzle: #D9DEEC;
  --meo-line: #232842;
  --meo-brow: #2A2F4F;
  --meo-coat: #1A1E2C;
  --meo-coat-hi: #2E3448;
  --meo-lapel: #252A3B;
  --meo-shirt: #DCE1EE;
  --meo-glove: #DCE1EE;
  --meo-badge: #DCE1EE;
  --meo-brand-text: #B5342D;
  --meo-star: #DDB52C;
  --meo-trousers: #1E2232;
  --meo-shoe: #101219;
}

.meo-cat.meo-tom[data-state="offline"] {
  --meo-fur: #B7BBC4;
  --meo-fur-shade: #A2A6B0;
  --meo-muzzle: #EEEFF2;
  --meo-line: #5D5A66;
  --meo-brow: #7D7A85;
  --meo-whisker: #5D5A66;
  --meo-nose: #8E8B96;
  --meo-nose-line: #6E6B76;
  --meo-iris-1: #E2E6EA;
  --meo-iris-2: #AEB6BF;
  --meo-iris-3: #8B939C;
  --meo-iris-4: #6F7780;
  --meo-iris-ring: #5F6670;
  --meo-iris-fiber: #D7DCE1;
  --meo-pupil: #3C3B42;
  --meo-mouth: #6E6A72;
  --meo-coat: #6A6773;
  --meo-coat-hi: #84818C;
  --meo-trousers: #75727E;
  --meo-shoe: #55525D;
  --meo-shoe-hi: #8E8B96;
  --meo-lapel: #77747F;
  --meo-button: #6A6773;
  --meo-bowtie: #5D5A66;
  --meo-bowtie-hi: #8B888F;
  --meo-brand-text: #A9A6AC;
  --meo-star: #D6D2C6;
}

/* Role classes -> properties. */
.meo-cat .c-fur { fill: var(--meo-fur); }
.meo-cat .c-fur-stroke { stroke: var(--meo-fur); }
.meo-cat .c-shade { fill: var(--meo-fur-shade); }
.meo-cat .c-shade-stroke { stroke: var(--meo-fur-shade); }
.meo-cat .c-line { stroke: var(--meo-line); }
.meo-cat .c-line-fill { fill: var(--meo-line); }
.meo-cat .c-line-soft { stroke: var(--meo-line-soft); }
.meo-cat .c-brow { stroke: var(--meo-brow); }
.meo-cat .c-whisker { stroke: var(--meo-whisker); }
.meo-cat .c-ear { fill: var(--meo-ear); }
.meo-cat .c-nose { fill: var(--meo-nose); }
.meo-cat .c-nose-line { stroke: var(--meo-nose-line); }
.meo-cat .c-blush { stop-color: var(--meo-blush); }
.meo-cat .c-blush-line { stroke: var(--meo-blush-line); }
.meo-cat .c-sclera { fill: var(--meo-sclera); }
.meo-cat .c-sclera-shade { fill: var(--meo-sclera-shade); }
.meo-cat .c-iris-1 { stop-color: var(--meo-iris-1); }
.meo-cat .c-iris-2 { stop-color: var(--meo-iris-2); }
.meo-cat .c-iris-3 { stop-color: var(--meo-iris-3); }
.meo-cat .c-iris-4 { stop-color: var(--meo-iris-4); }
.meo-cat .c-iris-ring { stroke: var(--meo-iris-ring); }
.meo-cat .c-iris-fiber { stroke: var(--meo-iris-fiber); }
.meo-cat .c-pupil { fill: var(--meo-pupil); }
.meo-cat .c-glint { fill: var(--meo-glint); }
.meo-cat .c-mouth { fill: var(--meo-mouth); }
.meo-cat .c-tongue { fill: var(--meo-tongue); }
.meo-cat .c-tongue-line { stroke: var(--meo-tongue-line); }
.meo-cat .c-tooth { fill: var(--meo-tooth); }
.meo-cat .c-bean { fill: var(--meo-bean); }
.meo-cat .c-bow { fill: var(--meo-bow); }
.meo-cat .c-bow-dark { fill: var(--meo-bow-dark); }
.meo-cat .c-bow-dot { fill: var(--meo-bow-dot); }
.meo-cat .c-collar { fill: var(--meo-collar); }
.meo-cat .c-collar-dark { fill: var(--meo-collar-dark); }
.meo-cat .c-collar-hi { stroke: var(--meo-collar-hi); }
.meo-cat .c-tag { fill: var(--meo-tag); }
.meo-cat .c-tag-ring { stroke: var(--meo-tag-ring); }
.meo-cat .c-tag-hi { fill: var(--meo-tag-hi); }
.meo-cat .c-eyeshadow { stop-color: var(--meo-eyeshadow); }
.meo-cat .c-eyeshadow-deep { stop-color: var(--meo-eyeshadow-deep); }
.meo-cat .c-mark { fill: var(--meo-mark); }
.meo-cat .c-ground { fill: var(--meo-ground); }
.meo-cat .c-trousers { fill: var(--meo-trousers); }
.meo-cat .c-shoe { fill: var(--meo-shoe); }
.meo-cat .c-shoe-hi { stroke: var(--meo-shoe-hi); }
.meo-cat .c-tear { fill: var(--meo-tear); }
.meo-cat .c-tear-line { stroke: var(--meo-tear-line); }
.meo-cat .c-sweat { fill: var(--meo-sweat); }
.meo-cat .c-sweat-line { stroke: var(--meo-sweat-line); }
.meo-cat .c-heart { fill: var(--meo-heart); }
.meo-cat .c-heart-line { stroke: var(--meo-heart-line); }
.meo-cat .c-sparkle { fill: var(--meo-sparkle); }
.meo-cat .c-shades-1 { stop-color: var(--meo-shades-1); }
.meo-cat .c-shades-2 { stop-color: var(--meo-shades-2); }
.meo-cat .c-anger { stroke: var(--meo-anger); }
.meo-cat .c-gloom { stop-color: var(--meo-gloom); }
.meo-cat .c-zzz { stroke: var(--meo-zzz); }
.meo-cat .c-mark-q { stroke: var(--meo-mark-q); }
.meo-cat .c-mark-q-fill { fill: var(--meo-mark-q); }
.meo-cat .c-mark-ex { stroke: var(--meo-mark-ex); }
.meo-cat .c-mark-ex-fill { fill: var(--meo-mark-ex); }
.meo-cat .c-ripple { stroke: var(--meo-ripple); }
.meo-cat .c-bubble { fill: var(--meo-bubble); }
.meo-cat .c-fish { fill: var(--meo-fish); }
.meo-cat .c-muzzle { fill: var(--meo-muzzle); }
.meo-cat .c-coat { fill: var(--meo-coat); }
.meo-cat .c-coat-hi { fill: var(--meo-coat-hi); }
.meo-cat .c-lapel { fill: var(--meo-lapel); }
.meo-cat .c-shirt { fill: var(--meo-shirt); }
.meo-cat .c-button { fill: var(--meo-button); }
.meo-cat .c-bowtie { fill: var(--meo-bowtie); }
.meo-cat .c-bowtie-hi { stroke: var(--meo-bowtie-hi); }
.meo-cat .c-glove { fill: var(--meo-glove); }
.meo-cat .c-glove-shade { fill: var(--meo-glove-shade); }
.meo-cat .c-badge { fill: var(--meo-badge); }
.meo-cat .c-brand-text { fill: var(--meo-brand-text); }
.meo-cat .c-star { fill: var(--meo-star); }

/* Palette changes (sleep, offline, brand) fade instead of jumping. */
.meo-cat path,
.meo-cat ellipse,
.meo-cat circle,
.meo-cat rect {
  transition: fill 0.8s ease, stroke 0.8s ease;
}