/* Look tokens: colours, fonts and the pixel unit.
   Same values as design/tokens.json and docs/LOOK-RULES.md. Change a colour here and it changes everywhere. */
:root {
  /* Brand colours */
  --bg: #f1faff;          /* Cloud White: app background, always */
  --sky: #01b3ef;
  --cloud: #d9ebfb;
  --soft-pink: #fbadd1;
  --title-pink: #ff73a9;
  --hot-pink: #f21b85;    /* large reward shapes only */
  --sunshine: #fad84d;
  --butter: #fff0d2;
  --grass: #48c64f;
  --deep-grass: #068910;
  --purple: #7525ce;
  --ink: #25304a;         /* text and outlines */
  --muted: #4d5b74;       /* secondary text */
  --white: #ffffff;

  /* Light and shade pixels inside frames (taken from the ui-kit sprites) */
  --white-shade: #e3edf9;
  --frame-soft: #cfe6f5;
  --butter-light: #fff8eb;
  --butter-shade: #dcd1bc;
  --sun-light: #fdedaf;
  --sun-shade: #d8bd4d;
  --pink-light: #ffc0d8;
  --pink-shade: #dc689a;

  /* Fonts (files live in public/fonts) */
  --font-title: 'Monster Friend Fore', 'Pixelify Sans', sans-serif;
  --font-ui: 'Pixelify Sans', sans-serif;
  --font-body: 'Nunito', sans-serif;

  /* One pixel unit per screen, whole numbers only (docs/LOOK-RULES.md, Responsive).
     --u is the pixel unit on task screens, --uo on reward overlays, --s scales ordinary text.
     Phone 3 / 4, tablet 4 / 5, desktop 4 / 6, big monitor 5 / 6 (overlay steps down on short windows). */
  --u: 3px;
  --uo: 4px;
  --uz: 2px;     /* Zipy's pixel unit on Welcome: the same sprite, scaled by a whole number */
  --s: 1;
  --rail: 0px;   /* width of the desktop side rail (0 = tab bar is at the bottom) */
}

/* Tablet: 600px and wider (and tall enough, so a phone turned sideways keeps the phone look) */
@media (min-width: 600px) and (min-height: 560px) {
  :root { --u: 4px; --uo: 5px; --uz: 3px; --s: 1.2; }
}
/* Desktop: 1024px and wider. Tab bar becomes a side rail. */
@media (min-width: 1024px) and (min-height: 560px) {
  :root { --uo: 5px; --rail: 224px; }
}
@media (min-width: 1024px) and (min-height: 800px) {
  :root { --uo: 6px; }
}
/* Large monitor */
@media (min-width: 1440px) and (min-height: 800px) {
  :root { --u: 5px; --uo: 6px; --uz: 4px; --s: 1.35; --rail: 280px; }
}
/* Reward overlays must fit the window height: step the overlay unit down on short windows (whole numbers only) */
@media (max-height: 679px) { :root { --uo: 4px; } }
@media (max-height: 480px) { :root { --uo: 3px; } }