/* Colour only where the colour IS the information. Everything else stays black and white.
   Loads last, so these win over the black-and-white versions. */

:root {
  --blue-pill: #2f6bff;
  --red-pill: #e5262e;
  --skin-1: #ecc9ad; --skin-2: #ddae94; --skin-3: #cf9a80;
}

/* §02 the three pills: blue and red stay blue and red */
#pills .pc-blue { --mkc: var(--blue-pill); color: #fff; }
#pills .pc-red { --mkc: var(--red-pill); color: #fff; }

/* §04 the hypergamy meme, rebuilt: men in red, women in blue, like the original */
#hyper-forum .hf-svg .fig.m { fill: #ff4a50; }
#hyper-forum .hf-svg .fig.w { fill: #5c8bff; }
#hyper-forum .hf-svg .ar.m { stroke: #ff4a50; }
#hyper-forum .hf-svg .ar.w { stroke: #5c8bff; }

/* §13 skin diagrams: skin is skin-coloured, inflammation is red, sebum is yellow, water is blue */
#spf .uv-skin.s1 { fill: var(--skin-1); } #spf .uv-skin.s2 { fill: var(--skin-2); } #spf .uv-skin.s3 { fill: var(--skin-3); }
#spf .uv-b { stroke: #ff6a1a; } #spf .uv-a { stroke: #7b4fd6; }
.pr-plug { fill: #e2c77f; stroke: #8f7a3c; stroke-width: 2; }
.pr-dark { fill: #2b2118; }
.pr-inflam { fill: rgba(217, 58, 18, .18); stroke: rgba(217, 58, 18, .75); stroke-width: 2; stroke-dasharray: none; }
.pr-inflam.deep { fill: rgba(150, 30, 20, .25); }
.pr-red { stroke: rgba(217, 58, 18, .8); stroke-dasharray: none; }
#barrier .br-drops i { background: #3a7bd5; }
#moisturizer .mo-l.l1 { background: #bcd3e8; }
#moisturizer .mo-l.l2 { background: #e2d6c1; }
.ph-scale { border-image: linear-gradient(90deg, #d93a12, #e8b04a 35%, #8fbf6a 50%, #3a7bd5 75%, #3b2a8f) 1; }

/* "red mark or brown mark?": the whole point is the colour */
#marks .mk-skin { background: radial-gradient(circle at 35% 30%, #f3d6c1, #dcb196 70%, #c99a80); }
#marks .mk-dot.pie { background: rgba(196, 40, 70, .75); box-shadow: none; }
#marks .mk-dot.pih { background: rgba(92, 52, 30, .8); }

/* under-eye circles: pigment, blood vessels, shadow, puffiness */
#under-eyes .ue-sw.s1 { background: radial-gradient(circle at 50% 40%, #a77556, #6b4532); }
#under-eyes .ue-sw.s2 { background: radial-gradient(circle at 50% 40%, #b49ab9, #6e5687); }
#under-eyes .ue-sw.s3 { background: linear-gradient(180deg, #e2bfa6 0 35%, #7a6658 70%, #e2bfa6); }
#under-eyes .ue-sw.s4 { background: radial-gradient(circle at 50% 35%, #f6dccb, #e2a995 70%); }

/* skin texture swatches */
.tx-skin { background-color: #e2b89c; }
.tx-skin.near, .tx-skin.far { filter: contrast(1.15) saturate(1.05); }

/* guides: the plate's food groups, gums, skin tones */
.mx-svg .wedge.veg { fill: #7f9e5e; } .mx-svg .wedge.pro { fill: #e0764f; } .mx-svg .wedge.gra { fill: #d6bf86; }
.mx-svg .wedge ~ .lbl { fill: #111; } .mx-svg .wedge ~ .sub { fill: #3b3833; }
.mx-svg .gum { fill: rgba(228, 140, 128, .45); }
.mx-svg .skin1 { fill: var(--skin-1); } .mx-svg .skin2 { fill: var(--skin-2); } .mx-svg .skin3 { fill: #ead7a6; }

/* the pill words in running text carry their pill's colour */
.pw { padding: 0 .14em; margin: 0 -.02em; color: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pw.blue { background: var(--blue-pill); }
.pw.red { background: var(--red-pill); }