html {
  color-scheme: light dark;
}

:root {
  --sf-color: light-dark(#0071E3, #0071E3);
  --text-color: CanvasText;
  --text-dimmed: light-dark(#838383, #bebebe);
  --background: light-dark(#F2F2F7, #000000);
  --box-background: light-dark(#FFFFFF, #161617);
  
  --top-gradient: linear-gradient(90deg, light-dark(#3F85C6, #0E54FF) 16%, light-dark(#A568D0, #38C7FF) 41%, light-dark(#D9519C, #9939FF) 63%, light-dark(#EF5525, #FF6B90) 100%);
  --top-gradient-filter: linear-gradient(270deg, light-dark(rgba(245, 245, 247, 0.50), rgba(0, 0, 0, 0.50)) 0%,
      light-dark(rgba(245, 245, 247, 0.00), rgb(0, 0, 0)) 26%, light-dark(rgba(245, 245, 247, 0.00), rgba(0, 0, 0, 0.00)) 77%, light-dark(rgba(245, 245, 247, 0.50), rgba(0, 0, 0, 0.50)) 100%), linear-gradient(270deg, light-dark(rgba(245, 245, 247, 0.25), rgba(0, 0, 0, 0.25)) 0%, light-dark(rgba(245, 245, 247, 0.00), rgba(0, 0, 0, 0.00)) 10%, light-dark(rgba(245, 245, 247, 0.00), gba(0, 0, 0, 0.00)) 91%, light-dark(rgba(245, 245, 247, 0.25), rgba(0, 0, 0, 0.25)) 100%);
  
  --padding: 10px;
  --padding-thicker: calc(var(--padding) * 1.5);
  --padding-double: calc(var(--padding) * 2);
  --form-element-height: 32px;
  --border-radius: 6px;
  --border-radius-large: 20px;
  
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto;
  --font-size: 14px;
  
  --ease-out-cubic: cubic-bezier(0.16, 1, 0.29, 0.99);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}