/* Shared design values. Media-query thresholds are explicit numbers. */
:root {
  --gBpMobile: 300px;
  --gBpTablet: 880px;
  --gBpDesktop: 1024px;
  --gBpMax: 1200px;
  --gPadMain: 20px;
  --gPadMainH: calc(2 * var(--gPadMain));
  --gPadMainV: calc(1 * var(--gPadMain));
  --gColWhite: #fff;
  --gColGrayLight: #eee;
  --gColGrayLighter: #ccc;
  --gColGray: #aaa;
  --gColGrayDarker: #777;
  --gColGrayDark: #444;
  --gColBlack: #000;
  --gColYellow: #fed030;
  --gColOrange: #ff9c00;
  --gColRed: #cc0914;
  --gColPurple: #9b0081;
  --gColBlue: #0077cc;
  --gColPetrol: #0398b3;
  --gColCyan: #00cccc;
  --gColGreen: #00c800;
  --gColDebug: rgba(200, 0, 0, 0.1);
  --gColDebugGreen: rgba(0, 200, 0, 0.1);
  --gColDebugBlue: rgba(0, 0, 255, 0.1);
  --colRgdBg: #eeeae4;
  --colRgdGreen: #81b78a;
  --colRgdGreenDark: #005b32;
  --colRgdTurquoise: #83c8bb;
  --colRgdGreenMK: #009640;
  --colRgdGrayLight: #bababe;
  --colRgdGray: #6e6f77;
  --colRgdGrayDark: #4b463b;
  --colNavHover: #00d;
  --colNavSelected: #d00;
  --gColLighter: rgba(255, 255, 255, 0.4);
  --gColDarker: rgba(0, 0, 0, 0.5);
  --gAnimSpd: 0.25s;
  --gIconArea: 64px;
  --flex-width1x: 80%;
  --flex-width2x: 40%;
  --flex-width3x: 28%;
  --flex-width4x: 20%;
  --flex-width5x: 15%;
  --flex-width6x: 12%;
  --debug-headerOpacity: 0.4;
  --debug-debugAreaOpacity: 0.08;
  --debug-debugAreaOutline: color-mix(in srgb, var(--gColRed) 30%, transparent) solid 1px;
  --cookie-gColLighter: rgba(255, 255, 255, 0.6);
  --cookie-gColDarker: rgba(0, 0, 0, 0.8);
}