// Variables accessible to all Stylus files.
// Some layout variables are in JS only, see constants.ts [6PFDS3]

$watchbarWidth = 230px;   // dupl value, in js pixels & chars  [7GYK42] & [4YK0F2]

$veryNarrowLimit = 370px;
$narrowLimit = 500px;

// 768px is from node_modules/bootstrap/dist/css/bootstrap.css
$modalDialogBreakpoint = 768px;

$postFontSize = 14px;

$h1Color = #454545;

$uiFont = 'Open Sans', sans-serif
$uiHue = 207  // steel blue  [site_prim_col]

// 41 is orange — needs to be far away from $uiHue.
// Yellow = too bright (rgb 255 255 0 — i.e. 2 x 255).
$uiHueHighlightedBackground = 41

$uiNavHue = 0;
$uiNavSaturation = 37%;

$grayButtonBgColor = hsl(0 0% 92%);
$grayButtonBgHighlight = hsl(0 0% 97%);
$grayButtonFontColor = hsl(0deg 0% 16%);

// Yellow is info tips.
$yellowTipsHue = 55;
$yellowTipsBackground = hsl($yellowTipsHue 95% 87%);

// Orange is mini warning.
$orangeTipsHue = 35;
$orangeTipsBackground = hsl($orangeTipsHue 90% 93%);
$greenTipsHue = 110;  // 120 is green
$greenTipsBackground = hsl($greenTipsHue 69% 95%);

$heartAndErrorHue = 8; // red red orange red

$pendingModHue = 0;    // red
$rejectHue = $pendingModHue;
$acceptHue = $uiHue;

$errorColor = hsl(8, 100%, 23%);
$errorBackground = hsl(45, 100%, 90%);
$errorTextColorNoBg = hsl(9, 100%, 40%);
$errorInputBackground = hsl(8, 100%, 98.7%);
$errorOutlineBackground = hsl(8 80% 60%);

$subNavColor = hsl(0, 0%, 10%);
$subNavBackgroundColor = hsl(0, 0%, 91%);
$subNavHoverBackgroundColor = hsl(0, 0%, 97%);

$pageSectionBorder = 1px solid hsl(0, 0%, 70%)
$pageSectionBackground = hsl($uiHue, 0%, 96.4%)

$solvedHue = 120; // green

$pageScrollbarWidth = 13px;

$avatarSpace = 60px;  // [7UKWQ1]

$moveSectionTitleUpPx = 10px;

$postActionsMarginTop = 22px;
