:root {
  /* Viewport sizes */
  --app-height: 100dvh;
  --app-offset-top: 0px;
  --app-offset-left: 0px;

  /* Site sizes */
  --header-height: clamp(30px,4vh,50px);   /* clamp(min, preferred, max)  */
  --footer-height: clamp(64px,10vh,84px);

  /* Bar sizes */
  --bar-button-height: 38px; /*clamp(40px,3vh,52px);*/
  --bar-padding-x: 8px; /*clamp(12px,4vw,20px);*/
  --bar-padding-y: 30px; /* clamp(6px,1vh,12px); */

  /* Equation sizes */
  --equation-glyph-height: clamp(16px,2.5vh,24px);

  /* Text input size */
  --textinput-height: 2.5rem; /* clamp(56px,5vh,72px); */
  --textinput-width: 42vw; /* min(900px,42vw); */

  /* Colours (light theme) */
  --light-background-color: #ffffff;
  --light-text-color: #111111;
  --light-panel-color: #f3f3f3;
  --light-border-color: #cccccc;
  --light-link-bg: #ffffff;
  --light-link-hover: #dddddd;
  --light-glyph-color-blue: #2563eb;
  --light-glyph-color-red: #d60000;
    
  /* Colours (dark theme) */
  --dark-background-color: #111;
  --dark-text-color: #eee;
  --dark-panel-color: #181818;
  --dark-border-color: #333;
  --dark-link-bg: #111;
  --dark-link-hover: #222;
  --dark-glyph-color-blue: #60a5fa;
  --dark-glyph-color-red: #ff4d4d;

  /* Colours (default to light) */
  --background-color: var(--light-background-color);
  --text-color: var(--light-text-color);
  --panel-color: var(--light-panel-color);
  --border-color: var(--light-border-color);
  --link-bg: var(--light-link-bg);
  --link-hover: var(--light-link-hover);
  --glyph-color-blue: var(--light-glyph-color-blue);
  --glyph-color-red: var(--light-glyph-color-red);

  /* Transitions */
  --theme-transition: 250ms ease-in-out;
  --hover-transition: 140ms ease;
  --menu-transition-open: 460ms ease;
  --menu-transition-close: 100ms ease;
}